erkennen klicken, überprüfen Attributwert und Text innerhalb, und Anzeigeelement

Question

Ich muss erkennen, klicken Sie auf ein Element (.menuitem), überprüfen Sie den Text, der es enthält. Und dann, basierend auf dem Attribut (is-checked), verstecken oder zeigen Sie andere Elemente. Ich brauche das nur, wenn ich auf diese andere Schaltfläche klicke.

<div class="items"> 
    <div class="menuitem" is-checked="true"> 
    <div class="ytp-menuitem-label">Button 1</div></div> 
    <div class="menuitem" is-checked="false"> 
    <div class="ytp-menuitem-label">Button 2</div></div> 
</div> 
<div class="element">some content</div> 
<div class="element">some more content</div> 

$('.menuitem').click(function() { 
if ($('.menuitem').text().trim() === "Button 2"){ 
if ($('[is-checked="true"]')) 
    $('.element').css('display', 'block'); 
if ($('[is-checked="false"]')) 
    $('.element').css('display', 'none'); } 
}); 

hier ein JSFIDDLE, von dem, was ich habe:

Answer 1

$('.menuitem').click(function() { 
 
    console.log($(this).text().trim()) 
 
    if ($(this).text().trim() === "Button 2") { 
 
    if ($(this).attr('is-checked') == 'true') { 
 
     $('.element').css('display', 'block'); 
 
    } else { 
 
     $('.element').css('display', 'none'); 
 
    } 
 

 

 

 

 

 
    } 
 
});

.items { 
 
    height: 30px; 
 
    margin-bottom: 5px; 
 
} 
 
.menuitem { 
 
    float: left; 
 
    margin-right: 10px; 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="items"> 
 
    <div class="menuitem" is-checked="true"> 
 
    <div class="ytp-menuitem-label">Button 1</div> 
 
    </div> 
 
    <div class="menuitem" is-checked="false"> 
 
    <div class="ytp-menuitem-label">Button 2</div> 
 
    </div> 
 
</div> 
 

 
<div class="element">some content</div> 
 
<div class="element">some more content</div> 
 
<div class="element">even more content</div>

1. Verwenden $(this).attr('is-checked') den Wert
2. Auch $(this).text().trim() zu erhalten, um den Text von geklickt Element

Answer 2

Sie haben es ein bisschen falsch, Ihre if-Anweisung tatsächlich nicht an dem Element suchen, das geklickt wurde. Versuchen Sie etwas in dieser Richtung:

$('.menuitem').click(function() { 
    // $(this) is a reference to the element which was clicked 
    if ($(this).attr('is-checked') == "true") 
     $('.element').css('display', 'block'); 
    if ($(this).attr('is-checked') == "false") 
     $('.element').css('display', 'none'); 
});