动态jquery。如何仅将 jquery 应用于某些元素?

Posted

技术标签:

【中文标题】动态jquery。如何仅将 jquery 应用于某些元素?【英文标题】:Dynamic jquery. How to apply jquery only to certain elements? 【发布时间】:2021-03-30 15:17:02 【问题描述】:

嘿,伙计们,我正在做一个简单的悬停颜色更改,但是我发现自己重复 jquery 可以这样做,以便当 btn 悬停时,相应的 service-icon 更改颜色?下文不再赘述。

$(document).ready(function() 
    $('.btn-1').hover(function() 
        $('.service-icon-1').css('color', '#05FAB8');
    ,function()
        $('.service-icon-1').css('color', '');
    );
);
$(document).ready(function() 
    $('.btn-2').hover(function() 
        $('.service-icon-2').css('color', '#05FAB8');
    ,function()
        $('.service-icon-2').css('color', '');
    );
);
$(document).ready(function() 
    $('.btn-3').hover(function() 
        $('.service-icon-3').css('color', '#05FAB8');
    ,function()
        $('.service-icon-3').css('color', '');
    );
);

【问题讨论】:

你只需要一个$(document).ready()函数。 发布您的 html 【参考方案1】:

如果没有你的 HTML,我的 sn-p 很可能是无关紧要的。我假设图标不是每个按钮的子按钮,因为那样太容易了。

使用 JS,我将使用 data-attribute 将服务编号存储在按钮和图标上...并在 attribute selector 中使用该数据属性值。

注意template litteral的用法:反引号`$

$(document).ready(function() 
    $('.btn').hover(function() 
        let serviceNb = $(this).data("service")
        $(`.service-icon[data-service=$serviceNb]`).css('color', '#05FAB8');
    ,function()
        let serviceNb = $(this).data("service")
        $(`.service-icon[data-service=$serviceNb]`).css('color', '');
    );
);
div
  margin: 1em;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <span class="service-icon" data-service="1"><i class="fa fa-tools"></i></span>
  <span class="service-icon" data-service="2"><i class="fa fa-hand-holding-usd"></i></span>
  <span class="service-icon" data-service="3"><i class="fa fa-trash"></i></span>
</div>

<button class="btn"  data-service="1">Repair</button>
<button class="btn"  data-service="2">Sell</button>
<button class="btn"  data-service="3">Trash</button>

【讨论】:

【参考方案2】:
1) Put "btn-1", "btn-2, "btn-3" in the ID of your buttons, instead of class.
2) Put a common class in the buttons.  (e.g. "btn")
3) Use $(".btn").hover ONCE
4) Inside you can use $(this).prop("id") to get the actual ID (e.g. "btn-1")
5) Extract the "1" from that ID that you retrieve.  Put it in var btnIdNo.
6) Use $(`.service-icon-btnIdNo`).css(blah)

始终尝试将唯一标识符放入 ID 而不是 CLASS 中。保留 CLASS 以获取识别元素“类型”的方法。

【讨论】:

【参考方案3】:

可能是这样的:

 $(document).ready(function() 
   $('.btn-1, .btn-2, .btn-3').hover(function() 
      if ($(this).is('.btn-1')) 
        $('.service-icon-1').css('color', '#05FAB8');
       else if ($(this).is('.btn-2')) 
        $('.service-icon-2').css('color', '#05FAB8');
       else 
        $('.service-icon-3').css('color', '#05FAB8');
      
   ,function()
      $('.service-icon-1, .service-icon-2, .service-icon-3').css('color', '');
   );
);

【讨论】:

以上是关于动态jquery。如何仅将 jquery 应用于某些元素?的主要内容,如果未能解决你的问题,请参考以下文章

JQuery 仅将选中的行添加到数组

仅将操作应用于页面上的此元素

如何在对象 jQuery 中应用样式动态创建的 DOM

如何应用 jQuery 动态加载的内联和/或外部 CSS

如何将我的jQuery插件应用于动态创建的元素

AngularJS + JQuery:如何在 angularjs 中获取动态内容