检测点击，检查里面的属性值和文本，并显示元素答案

【问题标题】：detect click, check attribute value and text inside, and display element检测点击，检查里面的属性值和文本，并显示元素
【发布时间】：2016-07-26 02:56:00
【问题描述】：

我需要检测一个元素（.menuitem）的点击，检查它包含的文本。然后根据属性（is-checked）隐藏或显示其他元素。我只有在点击其他按钮时才需要这个。

<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：

【问题讨论】：

查看demo
@guradio 你应该把它作为答案发布:)
@MarkoMackic 发布它
好吧，现在我觉得很傻...... :(

标签： javascript jquery css userscripts

【解决方案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>

使用$(this).attr('is-checked')获取值
同样使用$(this).text().trim()获取点击元素的文本

【讨论】：

谢谢。这对我有帮助。
嗯，由于某种原因，我无法让它作为用户脚本工作。我想将此添加到网站的头部。

【解决方案2】：

你有点错了，你的 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');
});

【讨论】：