更改圖像按鈕在JavaScript

Question

我有一個HTML選項表格，用戶可以通過點擊添加按鈕添加一行：

$('.NewImg').click(function() { 
 
    var row = $(this).closest('tr').clone(); 
 
    row.find('input').val(''); 
 
    $(this).closest('tr').after(row); 
 
    $('input[type="image"]', row).removeClass('AddNew').addClass('RemoveRow'); 
 
}); 
 

 
$('table').on('click', '.RemoveRow', function() { 
 
    $(this).closest('tr').remove(); 
 
}); 
 
// everytime the save button is clicked 
 
$('#savebutton').click(function() { 
 
    saveList(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="multiselect" id="order-list"> 
 
    <tr> 
 
    <td> 
 
     <label>Studio:</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select class="studio"> 
 
     <option>-- Select Studio --</option> 
 
     <?php $resultStudio=g etStudioID(); while ($row=m ysqli_fetch_array($resultStudio)) { echo "<option value = '".$row[ 'studio_name']. "'>".$row[ 'studio_name']. "</option>"; } ?> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input id="addrow" class='NewImg' type="image" src="img/add.png" alt="Submit" onClick="return false;" /> 
 
    </td> 
 
    <td> 
 
     <a class="deleteRow"></a> 
 

 
    </td> 
 
    <!--<td><input type='button' class='AddNew' value='Add new item' /></td>--> 
 
    </tr> 
 
</table>

我如何更改JS圖像碼？當行添加的我還有一個「+」的形象，但是，我想將其更改爲「 - 」圖像

Answer 1

使用toggleClass

$('input[type="image"]', row).toggleClass('AddNew RemoveRow'); 

添加不同的背景，每一個類

Answer 2

沒有預先定義的稱爲scr的屬性用於輸入。你可以使用css在按鈕上添加圖像。

試試這個

<button type="button" style="background: url('img/add.png') no-repeat;">+</button> 

Answer 3

用自己的代碼，我將重構了很多：

注意的：.attr('src', 'img/remove.png')

顯然，你需要一個remove.png圖像中的img目錄

$('.NewImg').click(function() { 
 
    var row = $(this).closest('tr').clone(); 
 
    row.find('input').val(''); 
 
    $(this).closest('tr').after(row); 
 
    $('input[type="image"]', row).removeClass('AddNew').addClass('RemoveRow').attr('src', 'img/remove.png'); 
 
}); 
 

 
$('table').on('click', '.RemoveRow', function() { 
 
    $(this).closest('tr').remove(); 
 
}); 
 
// everytime the save button is clicked 
 
$('#savebutton').click(function() { 
 
    saveList(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="multiselect" id="order-list"> 
 
    <tr> 
 
    <td> 
 
     <label>Studio:</label> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select class="studio"> 
 
     <option>-- Select Studio --</option> 
 
     <?php $resultStudio=g etStudioID(); while ($row=m ysqli_fetch_array($resultStudio)) { echo "<option value = '".$row[ 'studio_name']. "'>".$row[ 'studio_name']. "</option>"; } ?> 
 
     </select> 
 
    </td> 
 
    <td> 
 
     <input id="addrow" class='NewImg' type="image" src="img/add.png" alt="Submit" onClick="return false;" /> 
 
    </td> 
 
    <td> 
 
     <a class="deleteRow"></a> 
 

 
    </td> 
 
    <!--<td><input type='button' class='AddNew' value='Add new item' /></td>--> 
 
    </tr> 
 
</table>