如何定位頁面上的每個鏈接和按鈕？

我有一個購物車，每行都包含一個表單域和一個複選框。如果客戶想要修改他們訂購的產品的數量，表單字段控制可以編輯的數量，並且該複選框選擇該項目，或者將項目扔在願望清單中或者將其移除。「添加到希望」列表和「刪除功能」從這個特定問題中分離出來。如何定位頁面上的每個鏈接和按鈕？

什麼，我正在查看，正在檢測何時已更改窗體，然後針對頁面上的每個錨定標記和按鈕，所以如果項目已被修改，腳本停止點擊並彈出引導模式，提醒用戶他們購物車中的東西已被修改。

HTML（購物車中排，通過JSTL forEach循環運行，但標記是這樣的）：

<table> 
<form id="shoppingCart" action="updateTheCart.action"> 
    <c:forEach var="item" items="${shoppingCart.items}" varStatus="status"> 
      <tr class="cart-row"> 
       <td class="remove" data-label="Remove"> 
        <label> 
         <input type="checkbox" name="removeFlag(<c:out value="${status.count}"/>)" value="true"/> 
        </label> 
       </td> 
       <td class="title" data-label="Title"> 
        ${item.value.sellableGood.name} 
       </td> 
       <td class="qty" data-label="Quantity"> 
        <input type="num" class="form-control qty-input" name="quantity(<c:out value="${status.count}" />)" value="<c:out value="${item.value.quantity}" />"/>  
       </td> 
       <td class="subtotal" data-label="Line Total"> 
        <fmt:formatNumber type="currency" pattern="$#,##0.00" value="${item.value.itemExtendedTotal}" /> 
       </td> 
      </tr> 
    </c:foreach> 
</table> 

<p><a href="checkout.action" id="checkout">Checkout</a></p> 
<p><button type="submit" id="checkout">Update Cart</button></p> 
<p><button id="addToWishlist" type="submit" id="wish-list">Add To Wish List</button></p> 
<p><a href="/" id="shop-more">Chontinue Shopping</a></p> 
</form>

JS：

$("#shoppingCart :input").change(function() { 
    $("#shoppingCart").data("changed",true); 
});

我知道我我錯過了很多，但我真的不知道從哪裏開始。

來源

2016-07-26 Murphy1976

'change'事件傳播，你不必添加一個偵聽每個輸入，只需將其添加到'body'。 –

你可以用'click'事件做同樣的事情。 – Whothehellisthat

'$（document）.on（'click'，'a，button'，function（event）{/ * Your stuff * /}）;' - http://api.jquery.com/on/ – GolezTrol

的Javascript：

;[].forEach.call(document.querySelectorAll('a, button'), function(element) { 
    //do something with buttons and links, for example: 
    element.setAttribute('data-changed', true') 
});

jQuery的等價物是：

$('a, button').each(function(element) {})

要監視更改的形式，我會用blur事件，它的焦點相反：

;[].forEach.call(document.querySelectorAll('#myForm input'), function(element) { 
    element.addEventListener('blur', function(event) { 
    //something has changed 
    }) 
});

Jquery：

$('#myForm input').on('blur', function(event) {})

來源

2016-07-26 19:52:26 soyuka

你可以嘗試onbeforeunload Event

$('input').change(function() { 
    if($(this).val() != "") 
     window.onbeforeunload = "Are you sure you want to leave?"; 
});

來源

2016-07-26 19:52:46 Kld

如何定位頁面上的每個鏈接和按鈕？

回答

相關問題