如何在轮播滑块中选择该类的单个值并将其输出到活动幻灯片中？

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",        },我想选择单个类，然后在 alertbox 和 sessionstore 中输出它“id”，以便在下一页我可以将它用作图像的修饰符。我已经尝试过使用类数组，但问题是它总是在循环。我需要知道当某个 owl-carousel 被选中或激活时，该幻灯片中的 id 将如何被选中。或者，如果您有其他理想的答案，我们也将不胜感激。谢谢！

Answer 1

我认为您的脚本有错误。我修好了请检查一下。

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>

Answer 2

我得到了自己的答案：

在底部添加了这些脚本并修改了 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>

棘手的举动，但仍然有效，所以一切都很好。