Anzeige Block mit Ereignisziel-ID

Question

Ich versuche, ein Element in einer Liste anzuzeigen, die eine Klasse hat, die genau dieselbe ID auf der anderen Liste ist. Dies würde aktiviert werden, wenn ich auf die andere Liste klicke, dann wird eine Übereinstimmungsklasse in der anderen Liste gefunden und dann angezeigt.

Hier ist der Code, den ich im Grunde verwende die erste Liste ist in display:none; Liste 2 ist mein Menü, auf dem in der Liste 1 möchten Sie angezeigt werden.

Die erste Liste sollte immer nur ein sichtbares Element enthalten.

Fiddle ist here

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> 

SCRIPT:

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

Es ist schlecht schlecht das gleiche id in einem HTML Dokument zu verwenden. Tue das niemals. Niemand mag das, jQuery mag das nicht. Ich mag es nicht. Versuchen Sie, eine Klasse oder eine data Eigenschaft zu verwenden.

Aber .. kratzen, dass .. Sie nicht wirklich versuchen, das zu tun. Aber immer noch .. es ist besser, eine data Eigenschaft zu verwenden :)

Anyways, um dies zu erreichen mit einer data Eigenschaft, können Sie etwas tun können:

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'); 
}); 

Versuchen Sie es.

Answer 3

Wenn Sie die ID von der Liste holen Sie geklickt haben:

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

Answer 4

Alles, was Sie brauchen, ist:

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

Überprüfen Sie das folgende Beispiel:

$('#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

Versuchen Sie ein Akkordeon zu machen?

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

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

jsFiddle