обнаружить щелчок, проверить значение атрибута и текст внутри и элемент отображения

Question

Мне нужно обнаружить щелчок элемента (.menuitem), проверить текст, который он содержит. И затем на основе атрибута (проверено), скрыть или показать другие элементы. Мне нужно это только при нажатии этой кнопки.

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

Вот JSFIDDLE, что у меня есть:

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. Используйте $(this).attr('is-checked'), чтобы получить значение
2. Также используйте $(this).text().trim(), чтобы получить текст щелкнули элемента

Answer 2

Вы получили это немного неправильно, ваше заявление, если не на самом деле смотрит на элемент, который щелкнули. Попробуйте что-то вдоль этих линий:

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