seo Question posted in
Some basic information to get you started with this can be found here.

How to array an id that contains same function in jquery – SEO

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/

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

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

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search