我需要比较订单列表中的哪个div是单击的。
因为我需要显示另一个div，其中索引在不同的列表中。
所有内容都已正确编写，但比较失败（if (ten == $(this))）。 （现在是因为：if（ten.is（this））{。正常工作）
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
$(".divs2 .os").each(function() { $(this).hide(); });
var ten = $(this);
$(".divs .bt-o").each(function(e) {
if (ten.is(this)) {
$(this).css('background-image', 'url(themes/o2.png)');
wybrany = e;
} else {
$(this).css('background-image', 'url(themes/o1.png)');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});
// EXTRA ADD FOR YOUR HELP (script for next & prev
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().fadeIn("slow").prev().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:first").fadeIn("slow");
}
return false;
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().fadeIn("slow").next().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:last").fadeIn("slow");
}
return false;
});
});.bt {
position:absolute;
left: 60px;
}
.bt-o {
padding:35px 50px;
width:54px;
height:29px;
display:inline-block;
font-size: 24px;
color: black;
cursor:pointer;
}
.last {
position:absolute;
left: 1000px;
background-image:url('themes/o22.png');
}
.os {
position:relative;
left: 30px;
top: 75px;
z-index:2;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev">PREV</a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a></div>
<div class="bt"><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next">NEXT</a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
为了您的帮助，如果有人需要使用，请添加完整的工作脚本。
答案 0 :(得分：1)
使用.is()代替==来测试两个元素的相等性。
如果您只是尝试将ten与this周围新构造的jQuery对象进行比较，则比较将失败 - 它们是在不同时间创建的不同对象。
is()对两个对象进行逻辑比较 - 它们是否代表相同的DOM元素？这就是为什么在比较之前你不需要在this中包装$()。
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
var ten = $(this);
$(".divs .bt-o").each(function(e) {
// test for DOM equality with is()
//
if (ten.is(this)) {
$(this).css('background-color', 'red');
wybrany = e;
} else {
$(this).css('background-color', 'transparent');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});.bt-o {
margin: .25em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
答案 1 :(得分：0)
你应该为每个div添加一个id或任何属性，并调整你的代码，如下所示：
// id可以通过您设置的属性来补充 if（ten.attr（'id'）== $（this）.attr（'id'）{ ........ }
答案 2 :(得分：0)
如果您可以更改$(document).ready(function(){
//Date Pickers - Main Page
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#date-from').datepicker({
format: 'dd/mm/yyyy',
startDate: '+1d',
weekStart: 1,
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
},
autoclose: true
}).on('changeDate', function (ev) {
});
});
的结构，以便所有div.divs都在同一个div.bt，那么这将非常简单：）
div.bt$(function() {
$(".bt").on("click", "a", function(e) { // add a click handler on div.bt which only executes the function if the clicked element has the class "bt-o"
// https://learn.jquery.com/events/event-delegation/
var os = $(".os"); // get all elements with class "os"
os.hide(); // hide all of them
var clickedElementIndex = $(this).index(); // get the position of the clicked element relative to its sibling elements
// https://api.jquery.com/index/
os.eq(clickedElementIndex) // get the "os" element at the same position as the clicked "bt-o" element
// https://api.jquery.com/eq/
.show(); // and show it
});
});/* this rules are only for visual effects :) */
.bt-o {
border: solid 1px black;
cursor: pointer;
}
.os {
display: none;
color: red
}
答案 3 :(得分：0)
稍微简单的方法，代码少一点，你不需要事件处理程序e，：
$(".bt-o").on('click', function() {
$(".bt-o").css({ background: 'transparent' }); // clear all backgrounds
$(this).css({ background: '#f90' }); // colour this one
var info = $(this).text(); // get the click text
$('.os').hide(); // hide everything
$('.os').each(function() { // cycle through everything
if ($('.rok', this).text() === info) { // check each targets text
$(this).css({
background: '#bbb'
}).fadeIn('fast'); // colour and reveal
}
});
});.bt {
position: relative;
width: 80%;
margin-bottom: 10px;
}
.bt-o {
border: 1px solid #f90;
margin-right: 5px;
}
.os {
display: none;
position: relative;
width: 80%;
border: 1px solid #09f;
margin-bottom: 10px;
}
.os div {
display: inline-block;
margin-right: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a>
</div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a>
</div>
</div>
<div class="divs2">
<div class="os">
<div class="rok">2007</div>sample</div>
<div class="os">
<div class="rok">2008</div>sample</div>
<div class="os">
<div class="rok">2009</div>sample</div>
<div class="os">
<div class="rok">2010</div>sample</div>
<div class="os">
<div class="rok">2011</div>sample</div>
<div class="os">
<div class="rok">2012</div>sample</div>
<div class="os">
<div class="rok">2016</div>sample</div>
<div class="os">
<div class="rok">2000</div>sample</div>
<div class="os">
<div class="rok">2001</div>sample</div>
</div>