Question

我有来自jquery的这5个自动生成的按钮，当你悬停按钮时，图像不透明度过滤器会改变：

但只是第一个按钮具有成功的运行功能，而其他所有功能都没有。我怎么能让其他生成的按钮具有相同的效果呢？

这是我的尝试：

$(document).ready(function(){
  var maxLength = 120;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<center><button class="btnsvc" id="wwdimg" style="top:20px" href="#!">Learn More</button></center>');
    }
  });

    $('#wwdimg').mouseover(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(30%)"});
    });
      $('#wwdimg').mouseout(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(100%)"});
    });
       $('#wwdimg').mouseover(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(30%)"});
    });
      $('#wwdimg').mouseout(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(100%)"});
    });

    });


    <div class="content back"></div>
    <div id="img-hover" >
    <img id="img_holder" src="http://192.168.1.250/sopi2018/wp-content/uploads/2018/03/h_backoffice-300x300.jpg" alt="" width="300" height="300" class="alignnone size-medium wp-image-604" /> 
    </div>
       <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants    
    </div>

       <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants    
    </div>
  <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants 
    </div>
  <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants 
    </div>
  <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants 
    </div>

工作小提琴：https://jsfiddle.net/akaqoaz0/37/

Answer 1

您使用相同的ID，ID必须是唯一的。所以我把它改成了班级名字。我改变了一些事情

＆＃13;

$(document).ready(function(){
  var maxLength = 120;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<center><button class="btnsvc wwdimg" style="top:20px" href="#!">Learn More</button></center>');
    }
  });

    $('.wwdimg').mouseover(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(30%)"});
    });
      $('.wwdimg').mouseout(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(100%)"});
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content back"></div>
<div id="img-hover" >
<img id="img_holder" src="https://images.unsplash.com/photo-1497120573086-6219573cf71c?ixlib=rb-0.3.5&s=931654c32c0da4acc0f9d5b1c4b0afb0&auto=format&fit=crop&w=1652&q=80" alt="" width="300" height="300" class="alignnone size-medium wp-image-604" /> 
</div>
   <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants	
</div>

   <div class="show-read-more">Content and Creative Writing, Social Media Management, SEO, Outbound Sales, Outbound Sales Appointment Setting, Inbound sales, Surveys, Vendor Management and Support, Virtual Assistants	
</div>

＆＃13;

Answer 2

您不应该使用ID选择器。因为它是唯一查询。

所以你必须使用＆＃39; name＆＃39;

见我的jsfiddle。

https://jsfiddle.net/ChoHongRae/5g6ksbma/3/

    $(document).ready(function(){
  var maxLength = 120;
  $(".show-read-more").each(function(){
    var myStr = $(this).text();
    if($.trim(myStr).length > maxLength){
      var newStr = myStr.substring(0, maxLength);
      var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
      $(this).empty().html(newStr);
      $(this).append('<center><button class="btnsvc" name="wwdimg" style="top:20px" href="#!">Learn More</button></center>');
    }
  });

    $('button[name="wwdimg"]').mouseover(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(30%)"});
    });
      $('button[name="wwdimg"]').mouseout(function(){
        $('#img_holder').css({"opacity": "1","filter":"brightness(100%)"});
    });

});

如何在jquery

2 个答案: