具有事件目標ID的顯示塊

Question

我嘗試在列表中顯示一個項目，該項目的類與另一個列表上的ID完全相同。 當我單擊另一個列表時，它將被激活，然后它將在另一個列表中找到一個匹配類，然后顯示它。

這是我正在使用的代碼，基本上第一個列表在display:none; 列表2是我要在列表1中顯示的菜單。

第一個列表一次只能包含一個可見項。

小提琴在這里

的HTML

<div id="gallery-container">
            <li class="1723"><p>
      123
      </p></li>
            <li class="1725"><p>
      456
      </p></li>
    </div>
<ul id="gallery-list">
    <li id="1723">
        <strong>qwertyuiop</strong>
    </li>
    <li id="1725">
        <strong>asdfghjkl</strong>
    </li>
</ul>

腳本：

    $("#gallery-list li").click(function() {    
            alert(event.target.id);
        $("#gallery-container li .wc-gallery").css("display", "none");
    });

    window.onload = function () {
         $("#gallery-container li p").css("display", "none");
    }

CSS：

#gallery-container li p {display:none;}

Answer 1

在一個 HTML文檔中使用相同的 id是 很不好的 。 永遠不要這樣做。 沒人喜歡， jQuery不喜歡。 我不喜歡 嘗試使用類或data屬性。

但是..從頭開始..您並不是真的想要這樣做。 但是仍然..最好使用data屬性:)

無論如何，要使用data屬性完成此操作，您可以執行以下操作：

html

<div id="gallery-container">
  <li data-id="1723">
    <p>
      123
    </p>
  </li>
  <li data-id="1725">
    <p>
      456
    </p>
  </li>
</div>
<ul id="gallery-list">
  <li data-id="1723">
    <strong>qwertyuiop</strong>
  </li>
  <li data-id="1725">
    <strong>asdfghjkl</strong>
  </li>
</ul>

js

$("#gallery-list li").click(function() {
  var id = $(this).data('id');
  $("#gallery-container").find('li').each(function() {
     $(this).find('p').toggle($(this).data('id') === id);
  });
});

jsfiddle

Answer 2

$('#gallery-list li').click(function() {    
    var targeeet = $(this).attr('id');
    $('.' + targeeet).children().css('display', 'block');
});

嘗試這個。

Answer 3

如果要獲取單擊的列表的ID，請執行以下操作：

    $("#gallery-list li").on("click", function() {
            alert($(this).attr("id"))
        $("#gallery-container li .wc-gallery").css("display", "none");
    });

Answer 4

所有你需要的是 ：

$('#gallery-list li').click(function() {
      var target = $(this).attr('id');
      $("#gallery-container li").hide();
      $("#gallery-container li."+target).css('display', 'block');
    });

檢查以下示例：

 $('#gallery-list li').click(function() { var target = $(this).attr('id'); $("#gallery-container li").hide(); $("#gallery-container li."+target).css('display', 'block'); }); 

 #gallery-container li{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="gallery-container"> <li class="1723"> <p> 123 </p> </li> <li class="1725"> <p> 456 </p> </li> </div> <ul id="gallery-list"> <li id="1723"> <strong>qwertyuiop</strong> </li> <li id="1725"> <strong>asdfghjkl</strong> </li> </ul> 

Answer 5

您是否正在嘗試制作手風琴？

$("#gallery-container li").hide();

$("#gallery-list li").click(function() {    
    $("#gallery-container li").hide();
    $("#gallery-container li."+this.id).show();
});    

jsFiddle