jQuery单击以检查它是否具有某个类的div，然后更改不同类的值

Question

我正在编写的代码适用于您选择一个图标并显示 css 行的应用程序，以便您轻松复制粘贴并将其用于另一个项目。我在使用 $(this) 选择器时遇到了问题。我有几个带有“glyph-holder”类的 div，我按下哪个都没有关系，它总是将“copy_text”div 的值更改为同一个类，第一个。我希望它将其更改为我按下的 div。

我拥有的 html 是：

<div id="copy_text">Select icon</div>
<div class="glyph-holder">
    <div class="glyph">
        <div class="icon-flip-horizontal"></div>
    </div>
    <div class="beschrijving-bij-glyph">
         icon-flip-horizontal
    </div>
</div>

我目前拥有的javascript是这样的：

$(document).ready(function(){

    var displayText = "Empty";

    $(".glyph-holder").click(function(){

        if($(this).has("icon-flip-horizontal")){
            displayText = "icon-flip-horizontal";
        }else if($(this).has("icon-flip-vertical")){
            displayText = "icon-flip-vertical";
        }

        $("#copy_text").text(displayText);
    });
});

Answer 1

has() 中的选择器缺少该类的 . 前缀。您还需要检查生成的 jQuery 对象的 length 属性。试试这个：

var displayText = "Empty";

$(".glyph-holder").click(function() {
  if ($(this).has(".icon-flip-horizontal").length) {
    displayText = "icon-flip-horizontal";
  } else if ($(this).has(".icon-flip-vertical").length) {
    displayText = "icon-flip-vertical";
  }
  $("#copy_text").text(displayText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copy_text">Select icon</div>
<div class="glyph-holder">
  <div class="glyph">
    <div class="icon-flip-horizontal"></div>
  </div>
  <div class="beschrijving-bij-glyph">
    icon-flip-horizontal
  </div>
</div>

Answer 2

您通过id 定位 div，因此它将仅定位一个 div。您可以使用 prev 函数通过 div 获取 copy_text div。 $(document).ready(function(){

var displayText = "Empty";

$(".glyph-holder").click(function(){

    if($(this).has(".icon-flip-horizontal")){
        displayText = "icon-flip-horizontal";
    }else if($(this).has(".icon-flip-vertical")){
        displayText = "icon-flip-vertical";
    }

    $(this).prev().text(displayText);
  });
});

Answer 3

您当前没有指定 has 正在寻找一个类，.has() 也返回一个 jQuery 对象，因此应该使用 .length 来测试元素的数量。试试这个吧。

$(document).ready(function(){

    var displayText = "Empty";

    $(".glyph-holder").click(function(){

        if($(this).has(".icon-flip-horizontal").length){
            displayText = "icon-flip-horizontal";
        }else if($(this).has(".icon-flip-vertical").length){
            displayText = "icon-flip-vertical";
        }

        $("#copy_text").text(displayText);
    });
});

注意，.has(".icon-flip-horizontal") 中的 . 很重要，因为它引用了一个类。