How to array an id that contains same function in jquery

Question

i have this 5 auto generated button from jquery and when you hover the button the image opacity filter changes:

but just the first button has the successful running function all of the others don't. how could I make the other generated buttons has the same effect too?

here's my attempt:

$(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>

Working Fiddle: https://jsfiddle.net/akaqoaz0/37/

sarathkumar · Accepted Answer · 2018-03-09 07:17:38Z

you are using the same id, id needs to be unique. so i changed it to class name. i have changed few things

$(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%)"});
    });

});

<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>

Thank you for this but how about multiple images? like all the button hover will effect also all the images. like if a add another img src but contains different image but same id. is it possible to do that?

minam.cho · Accepted Answer · 2018-03-09 07:25:15Z

1

You should not use Selector by ID. Because it's an Unique query.

So You have to use 'name'

See my 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%)"});
    });

});

answered Mar 9, 2018 at 7:25

minam.cho

1301 silver badge13 bronze badges

2 Comments

user3117337 Over a year ago

How about if i added another image src. will it be possible to also have the same effect using all the button hover?

minam.cho Over a year ago

It is possible. because it is not a matter of "src" of Image.

Collectives™ on Stack Overflow

How to array an id that contains same function in jquery

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related