Question

鼠标悬停事件的这个切换工作正常：

jQuery(document).ready(function(){
    jQuery(".info").hide();
    jQuery(".trigger").mouseout(function(){
        jQuery(".info").slideUp(200);
    });
    jQuery(".trigger").mouseover(function(){
        jQuery(".info").slideToggle();
    });
});

但是有太多的对象，所以如果我触发一些触发器，它会向我展示info类的所有区域。最简单的方法是添加ID：

<div class="trigger" id="1">Details</div>
<div class=" info" id="1">
    <p> <b> Projektbeschreibung </b> </p>
    <p> Lorem ipsum one. </p>
</div>

<div class="trigger" id="2">Details</div>
<div class=" info" id="2">
    <p> <b> Projektbeschreibung </b> </p>
    <p> Lorem ipsum two. </p>
</div>

因此，触发器仅触发其所属的信息。我不是很喜欢jQuery，所以我的问题是如何让这个id匹配js代码？

Answer 1

在回调中，请参阅使用this调用的对象：

jQuery(document).ready(function(){
    jQuery(".info").hide();
    jQuery(".trigger").mouseout(function(){
         jQuery(this).slideUp(200);
    });
    jQuery(".trigger").mouseover(function(){
         jQuery(this).slideToggle();
    });
    });

Answer 2

在处理函数中使用this，该函数引用Element调用哪个事件！

jQueryObject.next([SELECTOR])将选择current元素的直接同级元素。

注意：从文档中删除重复ID，There must not be multiple elements in a document that have the same id value.

jQuery(document).ready(function() {
  jQuery(".info").hide();
  jQuery(".trigger").mouseout(function() {
    jQuery(this).next(".info").slideUp(200);
  });
  jQuery(".trigger").mouseover(function() {
    jQuery(this).next(".info").slideDown(200);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="trigger">Details</div>
<div class=" info">
  <p> <b> Projektbeschreibung </b> 
  </p>
  <p>Lorem ipsum one.</p>
</div>

<div class="trigger">Details</div>
<div class=" info">
  <p> <b> Projektbeschreibung </b> 
  </p>
  <p>Lorem ipsum two.</p>
</div>

Answer 3

＆＃13;

jQuery(document).ready(function(){
  jQuery(".trigger").hover(function() {
    $('#' + $(this).attr('data-target')).stop(true).slideToggle();
  });
});

＆＃13;

.info {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="trigger" data-target="item-1">Details</div>
<div class=" info" id="item-1"><p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum one. </p>
</div>

<div class="trigger" data-target="item-2">Details</div>
<div class=" info" id="item-2"><p> <b> Projektbeschreibung </b> </p>
<p> Lorem ipsum two. </p>
</div>

＆＃13;

Answer 4

@Jonathan使用JQuery很容易。

在你的JQuery函数中，你只需要做一些调整来获取ID并按预期执行函数。

jQuery(document).ready(function(){ jQuery(".info").hide(); jQuery(".trigger").mouseout(function(){ var elem_id = $(this).attr('id'); jQuery(".info#"+elem_id).slideUp(200); }); jQuery(".trigger").mouseover(function(){ var elem_id = $(this).attr('id'); jQuery(".info#"+elem_id").slideToggle(); }); });

尝试以上代码。

jQuery ID匹配

4 个答案: