Question

我有一些同类的div请看这个

<div class="parent" style="display:none">
        <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
        <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
        <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
        <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>
</div>

<div class="div2">text</div>

如何为class-1执行哪种样式颜色为rgb(134, 122, 36)的触发点击？

Answer 1

你可以在jQuery trigger()

的帮助下使用jQuery的attribute equals selector

$(".class-1[style='color:rgb(198, 172, 0);']").on('click', function(){
	alert('works');
});

$(".class-1[style='color:rgb(198, 172, 0);']").trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" style="display:none">
        <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
        <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
        <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
        <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>
</div>

<div class="div2">text</div>

Answer 2

您可以使用给定的类循环遍历元素，然后比较它们的css颜色属性，并在符合您要求的情况下触发单击。

$(document).ready(function(){
  $('.class-1').on('click', function(){
    alert($(this).css('color'));
  })
  $('.class-1').each(function(index, item) {
    console.log($(item).css('color') == 'rgb(134, 122, 36)');
    if($(item).css('color') == 'rgb(134, 122, 36)') {
      $(item).trigger("click");
    }
  })
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent" >
    <div class="class-1" style="color:rgb(198, 172, 0);">hii</div>
    <div class="class-1" style="color:rgb(134, 122, 36);">hii</div>
    <div class="class-1" style="color:rgb(251, 206, 146);">hii</div>
    <div class="class-1" style="color:rgb(249, 70, 28);;">hii</div>

</div>

<div class="div2">text</div>

Answer 3

你也可以这样做。

$(function(){
    $(".class-1[style='color:rgb(134, 122, 36);']").on('click', function(){
        alert('red');
    });

    $('.class-1').each(function (i, el) {
        if($(el).attr('style') == 'color:rgb(134, 122, 36);') {
        $(el).trigger('click')
      }
    })
})

触发在jquery中单击具有所选css值的元素

3 个答案: