这是我的代码行
<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;
}
我想选择单个类,然后将其输出到警报框中并 session 存储“id”,以便在下一页中我可以将其用作图像的修饰符。我已经尝试过使用类数组,但问题是它总是循环。我需要知道当选择或激活某个猫头鹰旋转木马时,如何选择该幻灯片中的 id。或者如果您有其他理想的答案,我们也将不胜感激。谢谢!
最佳答案
我认为您的脚本有错误。我已修复,请检查。
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>
关于javascript - 如何在轮播 slider 中选择此类的单个值并将其输出到事件幻灯片中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60629763/