在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')

顯然，您需要在img目錄中使用remove.png圖片

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