正在搜索同一個div

Question

我需要比較訂單列表中哪一個div是單擊的。 因爲我然後需要顯示另一個div其索引在不同的列表中。

一切正常書面，但比較失敗（if (ten == $(this))）。 （現在是chenged爲：如果（ten.is（本））{正常工作）

$(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 { 
 
\t position:absolute; 
 
\t left: 60px; 
 
} 
 
.bt-o { 
 
\t padding:35px 50px; 
 
\t width:54px; 
 
\t height:29px; 
 
\t display:inline-block; 
 
\t font-size: 24px; 
 
\t color: black; 
 
\t cursor:pointer; 
 
} 
 
.last { 
 
\t position:absolute; 
 
\t left: 1000px; 
 
\t background-image:url('themes/o22.png'); 
 
} 
 
.os { 
 
\t position:relative; 
 
\t left: 30px; 
 
\t top: 75px; 
 
\t 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"> 
 
\t <div class="os"><div class="rok">2007</div>sample</div> 
 
\t <div class="os"><div class="rok">2008</div>sample</div> 
 
\t <div class="os"><div class="rok">2009</div>sample</div> 
 
\t <div class="os"><div class="rok">2010</div>sample</div> 
 
\t <div class="os"><div class="rok">2011</div>sample</div> 
 
\t <div class="os"><div class="rok">2012</div>sample</div> 
 
\t <div class="os"><div class="rok">2016</div>sample</div> 
 
\t <div class="os"><div class="rok">2000</div>sample</div> 
 
\t <div class="os"><div class="rok">2001</div>sample</div> 
 
</div>

你的幫助我添加了完整的工作腳本，如果有人需要使用隨意。

Answer 1

使用.is()而不是==測試兩個要素的平等。

如果單純嘗試將ten與附近的新構建的jQuery對象進行比較，比較將失敗 - 它們是不同的對象，在不同的時間創建。

is() does logical比較兩個對象 - 它們是否代表相同的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"> 
 
\t <div class="os"><div class="rok">2007</div>sample</div> 
 
\t <div class="os"><div class="rok">2008</div>sample</div> 
 
\t <div class="os"><div class="rok">2009</div>sample</div> 
 
\t <div class="os"><div class="rok">2010</div>sample</div> 
 
\t <div class="os"><div class="rok">2011</div>sample</div> 
 
\t <div class="os"><div class="rok">2012</div>sample</div> 
 
\t <div class="os"><div class="rok">2016</div>sample</div> 
 
\t <div class="os"><div class="rok">2000</div>sample</div> 
 
\t <div class="os"><div class="rok">2001</div>sample</div> 
 
</div>

Answer 2

您應該添加一個id或每一格的任何屬性，調整一點點你這樣的代碼：

// ID可以通過屬性你設置 被repleace如果（ten.attr（「身份證」 ）== $（本）.attr（ '身份證'）{ ........ }

Answer 3

如果你可以改變的div.divs結構，使所有div.bt s爲在同一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 
 
}

<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"> <!-- only one div.bt for all the a.bt-o --> 
 
     <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> 
 
     <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>

Answer 4

稍微簡單的方法OD與少的代碼，你不需要的事件處理程序即：

$(".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>