Replaced anchor tag text when click on edit but at a time replace for one item?

user_6315418 0
Viewed 33

I am working on table field so when I click on first 'Edit' it will replace with 'Save' text and vice versa but what I need is, When 'edit' text replace as 'save' so it is mandatory to click on 'save' text then only next edit able to replace their text to 'save' else not change text

$("body").on('click','.clk',function(){            
            var edit_id=$(this).attr("data-id");            
            if($(this).text()==='Edit'){
                $(this).text('Save');
            }
            else{
                $(this).text('Edit');
            }            
    });
 <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
 <a class="clk" data-id="1" >Edit</a>    
    <a class="clk" data-id="2" >Edit</a>    
    <a class="clk" data-id="2" >Edit </a>    
    <a class="clk" data-id="2" >Edit</a>

jquery javascript
1 Answers

use this $(this).text('Save').siblings().text('Edit'); in your jquery it will be works...

$("body").on('click','.clk',function(){

        var edit_id=$(this).attr("data-id");
     $(this).text('Save').siblings().text('Edit');
        /*if($(this).text()==='Edit'){
            $(this).text('Save');
        }
        else{
            $(this).text('Edit');
        }*/

    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="clk" data-id="1" >Edit</a>

<a class="clk" data-id="2" >Edit</a>

<a class="clk" data-id="2" >Edit </a>

<a class="clk" data-id="2" >Edit</a>

user_61088820
Related