Question

我正在编写的代码适用于您选择图标并显示css行的应用程序，以便您轻松复制粘贴并将其用于其他项目。我在$（this）选择器上遇到了麻烦。我有几个div与＃34;字形持有人＆＃34;上课时我按下它并不重要，它总是改变＆＃34; copy_text＆＃34; 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

您当前没有指定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")非常重要，因为它引用了一个类。

Answer 3

您的目标是id div，因此它只会定位一个div。您可以使用copy_text函数通过div获取prev div。 $（文件）。就绪（函数（）{

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

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

3 个答案: