时间戳

首页 > 解决方案 > 属性类以数字结尾如何在js中添加选择器

javascript - 属性类以数字结尾如何在js中添加选择器

问题描述

在这里，我想一次选择属性。在悬停 icon1 上， test1 应该与其他人一样可见。我试过这样，但它不工作。任何人都可以建议我的方向

$('[class^="cr-icon"]').hover(function() {
  $('[class^="cr-box"]').css("opacity", "1");
}, function() {
  $('[class^="cr-box"]').css("opacity", "0");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cr-icons">
  <svg>
     <path class="cr-icon-1">icon main image</path>
     <path class="cr-icon-1">icon inner img</path>
     <path class="cr-icon-2">icon main image</path>
     <path class="cr-icon-3">icon3</path>
     <path class="cr-icon-2">icon inner img</path>
  </svg>
</div>
<div class="cr-wrap">
  <div class="cr-box-1">test1</div>
  <div class="cr-box-2">test2</div>
  <div class="cr-box-3">test3</div>
</div>

标签： javascriptphpjquery

解决方案

我对你的代码做了一些修改。希望这对您正在寻找的内容有所帮助。我所做的唯一更改是为每个图标提供一个 id，并根据该 id 显示相应的文本。我已将图标更改为按钮以供参考。您可以将其更改回图标。为了方便您使用，我附上了一个小提琴。

JS Fiddle 示例最新

HTML

 <div class="cr-wrap">
    <button class="cr-icon-1" data-id="1">icon 1</button>
    <button class="cr-icon-2" data-id="2">icon 2</button>
    <button class="cr-icon-3" data-id="3">icon 3</button>
</div>

<div class="cr-wrap">
    <div class="cr-box-1 default">test1</div>
    <div class="cr-box-2">test2</div>
    <div class="cr-box-3">test3</div>
</div>

查询

  $('[class^="cr-box"]').not('.default').css("opacity", "0");

        $('[class^="cr-icon"]').hover(function (i, e) {
           var id =  $(this).attr('data-id');
           var el = $('[class^="cr-box"]')[id - 1];
            $(el).css("opacity", "1");


        }, function (i, e) {
                var id = $(this).attr('data-id');
                $('[class^="cr-icon"]').each(function (i, e) {
                   
                    if (id != $(e).attr('data-id')) {
                        var el = $('[class^="cr-box"]')[id - 1];
                        $(el).not('.default').css("opacity", "0");
                    }
                });

        });

推荐阅读