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

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 = "";&nbsp;carousel()function carousel() {&nbsp; &nbsp; slider_details = [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/fastfood.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd_2+3.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "fastfood",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/restaurant.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "restaurant",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/beverages.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"packages.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "beverages",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/cake.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"packages.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "cake",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/fruit.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "fruit",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/grocery.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_conv.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "grocery",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/flower.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"packages.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "flower",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/vegetables.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "vegetables",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/organic.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "organic",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/office.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "office",&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: "img/slider/Supermarket.jpg",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text1: "What type of",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text2: "Business are you in?",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text3: "We provide best for our client and respect their business design idea.",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text4: "Get Started",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:&nbsp; &nbsp;"package_bsd.html",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id:&nbsp; &nbsp; "supermarket",&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $.each(slider_details, function(x,y) {&nbsp; &nbsp; &nbsp; &nbsp; html += '<div class="text-center item bg-img" data-overlay-dark="7" data-background="'+y.background+'" >';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; <div class="absolute-middle-center caption">';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; <div class="overflow-hidden">';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="alt-font font-size28 sm-font-size18 text-white no-margin">'+y.text1+'</h3>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="text-white">'+y.text2+'</h1>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="margin-30px-bottom sm-margin-20px-bottom sm-display-none">'+y.text3+'</p>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="type" value="'+y.id+'">';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="'+y.url+'" class="butn medium theme">';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="alt-font">'+y.text4+'</span><i class="fas fa-angle-right font-size16 sm-font-size14 text-white margin-10px-left"></i>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; html += '</div>';&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp; &nbsp; // sessionStorage.setItem('x', document.getElementById('type').value);}$(document).ready(function(){&nbsp; &nbsp; &nbsp; $("input").click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var value = $(this).val()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(value);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; &nbsp; $('.owl-carousel').html(html);function testfunc(){&nbsp; &nbsp; var g = document.getElementsByClassName("type").value;&nbsp; &nbsp; 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var html = "";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(slider_details, function(x,y) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '<div class="text-center item bg-img" data-overlay-dark="7" data-background="'+y.background+'" >';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; <div class="absolute-middle-center caption">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; <div class="overflow-hidden">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="alt-font font-size28 sm-font-size18 text-white no-margin">'+y.text1+'</h3>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1 class="text-white">'+y.text2+'</h1>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="margin-30px-bottom sm-margin-20px-bottom sm-display-none">'+y.text3+'</p>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="type" value="'+y.id+'">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="'+y.url+'" class="butn medium theme">';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '&nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html += '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });<script>&nbsp; &nbsp; window.onload = function(){&nbsp; &nbsp; &nbsp; &nbsp; sessionStorage.clear();&nbsp; &nbsp; }</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=fastfood]").click(function(){&nbsp; &nbsp; alert("fastfood");&nbsp; &nbsp; sessionStorage.setItem('x', 'fastfood');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=restaurant]").click(function(){&nbsp; &nbsp; alert("restaurant");&nbsp; &nbsp; sessionStorage.setItem('x', 'restaurant');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=beverages]").click(function(){&nbsp; &nbsp; alert("beverages");&nbsp; &nbsp; sessionStorage.setItem('x', 'beverages');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=cake]").click(function(){&nbsp; &nbsp; alert("cake");&nbsp; &nbsp; sessionStorage.setItem('x', 'cake');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=fruit]").click(function(){&nbsp; &nbsp; alert("fruit");&nbsp; &nbsp; sessionStorage.setItem('x', 'fruit');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=grocery]").click(function(){&nbsp; &nbsp; alert("grocery");&nbsp; &nbsp; sessionStorage.setItem('x', 'grocery');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=flower]").click(function(){&nbsp; &nbsp; alert("flower");&nbsp; &nbsp; sessionStorage.setItem('x', 'flower');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=vegetables]").click(function(){&nbsp; &nbsp; alert("vegetables");&nbsp; &nbsp; sessionStorage.setItem('x', 'vegetables');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=organic]").click(function(){&nbsp; &nbsp; alert("organic");&nbsp; &nbsp; sessionStorage.setItem('x', 'organic');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=alt-font][id=office]").click(function(){&nbsp; &nbsp; alert("office");&nbsp; &nbsp; sessionStorage.setItem('x', 'office');&nbsp; });});</script><script>&nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; $("[class=type][id=supermarket]").click(function(){&nbsp; &nbsp; alert("supermarket");&nbsp; &nbsp; sessionStorage.setItem('x', 'supermarket');&nbsp; });});</script>棘手的举动，但仍然有效，所以一切都很好。