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

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

标签： javascriptjquerycss

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>