[英]detect click, check attribute value and text inside, and display element
我需要检测元素(.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 :
您错了一点点,您的if语句实际上并不是在查看被单击的元素。 尝试以下方法:
$('.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');
});
$('.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>
$(this).attr('is-checked')
获取值 $(this).text().trim()
来获取被单击元素的文本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.