Как выбрать одно значение этого класса в слайдере карусели и вывести его на активный слайд?

Question

Вот строка моего кода

 <script>
carousel();
function carousel() {
    var slider_details = [
        {
            background: "img/slider/fastfood.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd_2+3.html",
            id:    "fastfood",
        },
        {
            background: "img/slider/restaurant.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "restaurant",
        },
        {
            background: "img/slider/beverages.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "beverages",
        },
        {
            background: "img/slider/cake.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "cake",
        },
        {
            background: "img/slider/fruit.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "fruit",
        },
        {
            background: "img/slider/grocery.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_conv.html",
            id:    "grocery",
        },
        {
            background: "img/slider/flower.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "flower",
        },
        {
            background: "img/slider/vegetables.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "vegetables",
        },
        {
            background: "img/slider/organic.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "organic",
        },
        {
            background: "img/slider/office.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "office",
        },
        {
            background: "img/slider/Supermarket.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "supermarket",
        }
    ];

    var html = "";
    $.each(slider_details, function(x,y) {
        html += '<div class="text-center item bg-img" data-overlay-dark="7" data-background="'+y.background+'" >';
        html += '    <div class="absolute-middle-center caption">';
        html += '        <div class="overflow-hidden">';
        html += '            <h3 class="alt-font font-size28 sm-font-size18 text-white no-margin">'+y.text1+'</h3>';
        html += '            <h1 class="text-white">'+y.text2+'</h1>';
        html += '            <p class="margin-30px-bottom sm-margin-20px-bottom sm-display-none">'+y.text3+'</p>';
        html += '            <input type="text" class="type" value="'+y.id+'">';
        html += '            <a href="'+y.url+'" class="butn medium theme">';
        html += '                <span class="alt-font">'+y.text4+'</span><i class="fas fa-angle-right font-size16 sm-font-size14 text-white margin-10px-left"></i>';
        html += '            </a>';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';

    });
    $(document).ready(function(){
      $("input").click(function(){
        var value = document.querySelector('.type').value;
            alert(value);
      });
    });


    $('.owl-carousel').html(html);
    // sessionStorage.setItem('x', document.getElementById('type').value);

}

function testfunc(){
    var g = document.getElementsByClassName("type").value;
    document.getElementById('lblsd').value = g;
}

Я хочу выбрать один класс, а затем вывести его в alertbox и сессионно сохранить "id", чтобы на следующей странице Я могу использовать его в качестве модификатора для изображения. Я уже пытался использовать массив классов, но проблема в том, что он всегда зацикливается. Мне нужно знать, как при выборе или активации определенной совы-карусели будет выбран идентификатор на этом слайде. или если у вас есть другой идеальный ответ будет оценен также. Спасибо!

Answer 1

Я получил свой собственный ответ:

добавил эти сценарии внизу и изменил хитрый ход var html

            var html = "";
            $.each(slider_details, function(x,y) {
                html += '<div class="text-center item bg-img" data-overlay-dark="7" data-background="'+y.background+'" >';
                html += '    <div class="absolute-middle-center caption">';
                html += '        <div class="overflow-hidden">';
                html += '            <h3 class="alt-font font-size28 sm-font-size18 text-white no-margin">'+y.text1+'</h3>';
                html += '            <h1 class="text-white">'+y.text2+'</h1>';
                html += '            <p class="margin-30px-bottom sm-margin-20px-bottom sm-display-none">'+y.text3+'</p>';
                // html += '            <input type="text" class="type" value="'+y.id+'">';
                html += '            <a href="'+y.url+'" class="butn medium theme">';
                html += '                <span class="alt-font" id="'+y.id+'" >'+y.text4+'</span><i class="fas fa-angle-right font-size16 sm-font-size14 text-white margin-10px-left"></i>';
                html += '            </a>';
                html += '        </div>';
                html += '    </div>';
                html += '</div>';

            });


<script>
    window.onload = function(){
        sessionStorage.clear();
    }
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=fastfood]").click(function(){
    alert("fastfood");
    sessionStorage.setItem('x', 'fastfood');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=restaurant]").click(function(){
    alert("restaurant");
    sessionStorage.setItem('x', 'restaurant');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=beverages]").click(function(){
    alert("beverages");
    sessionStorage.setItem('x', 'beverages');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=cake]").click(function(){
    alert("cake");
    sessionStorage.setItem('x', 'cake');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=fruit]").click(function(){
    alert("fruit");
    sessionStorage.setItem('x', 'fruit');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=grocery]").click(function(){
    alert("grocery");
    sessionStorage.setItem('x', 'grocery');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=flower]").click(function(){
    alert("flower");
    sessionStorage.setItem('x', 'flower');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=vegetables]").click(function(){
    alert("vegetables");
    sessionStorage.setItem('x', 'vegetables');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=organic]").click(function(){
    alert("organic");
    sessionStorage.setItem('x', 'organic');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=alt-font][id=office]").click(function(){
    alert("office");
    sessionStorage.setItem('x', 'office');
  });
});
</script>
<script>
    $(document).ready(function(){
    $("[class=type][id=supermarket]").click(function(){
    alert("supermarket");
    sessionStorage.setItem('x', 'supermarket');
  });
});
</script>

, но все еще работает, так что все хорошо в капоте.

Answer 2

Я думаю, что в вашем скрипте есть ошибки. Я исправил это Пожалуйста, проверьте это.

var slider_details;
var html = "";

 carousel()
function carousel() {
    slider_details = [
        {
            background: "img/slider/fastfood.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd_2+3.html",
            id:    "fastfood",
        },
        {
            background: "img/slider/restaurant.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "restaurant",
        },
        {
            background: "img/slider/beverages.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "beverages",
        },
        {
            background: "img/slider/cake.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "cake",
        },
        {
            background: "img/slider/fruit.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "fruit",
        },
        {
            background: "img/slider/grocery.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_conv.html",
            id:    "grocery",
        },
        {
            background: "img/slider/flower.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "packages.html",
            id:    "flower",
        },
        {
            background: "img/slider/vegetables.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "vegetables",
        },
        {
            background: "img/slider/organic.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "organic",
        },
        {
            background: "img/slider/office.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "office",
        },
        {
            background: "img/slider/Supermarket.jpg",
            text1: "What type of",
            text2: "Business are you in?",
            text3: "We provide best for our client and respect their business design idea.",
            text4: "Get Started",
            url:   "package_bsd.html",
            id:    "supermarket",
        }
    ];
    
    $.each(slider_details, function(x,y) {

        html += '<div class="text-center item bg-img" data-overlay-dark="7" data-background="'+y.background+'" >';
        html += '    <div class="absolute-middle-center caption">';
        html += '        <div class="overflow-hidden">';
        html += '            <h3 class="alt-font font-size28 sm-font-size18 text-white no-margin">'+y.text1+'</h3>';
        html += '            <h1 class="text-white">'+y.text2+'</h1>';
        html += '            <p class="margin-30px-bottom sm-margin-20px-bottom sm-display-none">'+y.text3+'</p>';
        html += '            <input type="text" class="type" value="'+y.id+'">';
        html += '            <a href="'+y.url+'" class="butn medium theme">';
        html += '                <span class="alt-font">'+y.text4+'</span><i class="fas fa-angle-right font-size16 sm-font-size14 text-white margin-10px-left"></i>';
        html += '            </a>';
        html += '        </div>';
        html += '    </div>';
        html += '</div>';

    });
   
    // sessionStorage.setItem('x', document.getElementById('type').value);

}
$(document).ready(function(){
      $("input").click(function(){
        var value = $(this).val()
            alert(value);
      });
    });

    $('.owl-carousel').html(html);

function testfunc(){
    var g = document.getElementsByClassName("type").value;
    document.getElementById('lblsd').value = g;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-carousel"></div>