Question posted in
You can find the official documentation here.

how to change each buttons values in a loop with jquery – Jquery ajax

i have many follow buttons and each button is linked with a specific user. now when a user clicks on the button it should change from follow to following for each button that is clicked in the div

i tried achieveing this by using this method:

   $(document).ready(function(){
  $('.msg-action').each(function(){
   $("#follow-button2").click(function(){
    if ($("#follow-button2").text().trim() == "Follow"){
        $("#follow-button2").text('Following');

    }else{
        $("#follow-button2").text('Follow');

   }
   });
   });
 });

but it doesn’t seem to work.
if i do this:

  $(document).ready(function(){

   $("#follow-button2").click(function(){
    if ($("#follow-button2").text().trim() == "Follow"){
        $("#follow-button2").text('Following');

    }else{
        $("#follow-button2").text('Follow');

   }
  });
  });

only the first instance of a button will be changed and others wont, because jquery understands the first instance of the class or id i am referring to.

my HTML CODE:

while($row3 = $query->fetch())
 {


  ?>
    <div Class="inside-card" 
                <td>
        <div class="msg-body">
        </a>
            </img>

                <div class="msg-action">

        <form method="POST" action='' name="followForm">

        <button  id="follow-button2" class='msg-icon' name="follow" type="submit" value="follow" onclick=""><span id="follow_id">Follow</span>  
            <input  type="hidden" value="<?php echo $follower_username; ?>" name="follow_id"/>
        </button>

 ?>

so is there a way to use jquery to change every clicked button?

Tags:

3

Answers


  1. 0

    First get all follow buttons and create an array to make it easier to iterate over the collection.

    const followButtonClass = "msg-action";
const getFollowButtonsByClass = (className) => document.getElementsByClassName(className);
const followButtons = [...getFollowButtonsByClass(followButtonClass)];

    Then attach the event to each follow button to change text when someone clicks on it.

    const followToggleHandler = (event) => 
   event.target.textContent === "Follow" ?
   event.target.textContent = "Following" : 
   event.target.textContent = "Follow"; // This will change to follow again when user clicks again

followButtons.forEach(x => {
    x.addEventListener("click", followToggleHandler);
})
    Login or Signup to reply.
  2. 0

    In your loop, you’re iterating parent elements but actually calling the single child element with this:

    $("#follow-button2").text('Following');

    If you want to access every element with id="follow-button2", you have to iterate child selector and access it with $(this) inside. Try something like this:

    $("#follow-button2").each(function(index) {
    // the context changed => use $(this) to access each element
    if ($(this).text().trim() == "Follow"){
        $(this).text('Following');

    }else{
        $(this).text('Follow');
   }
});
    Login or Signup to reply.
  3. 0

    Add this span inside your each button

     <span style="display:none">Following</span>

    Change the id of your button to class like 

          // your while loop starts
      // add this as your button in your while loop
      <button  class="follow-button" class='msg-icon' name="follow" type="submit" value="follow" ><span id="follow_id">Follow</span>  
        <input  type="hidden" value="<?php echo $follower_username; ?>" name="follow_id"/>
        <span style="display:none">Following</span>
    </button>

     // your loop ends

    and Add this js

    $('.follow-button').click(function(){


  $(this).find('span').toggle();

});

    Here is the jsfiddle, tested, working 100% correct.

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

Back To Top
Search