如何通過ID傳遞參數？

Question

這可能是一個愚蠢的問題，因為我在任何地方都沒有找到關於特定問題的任何信息，這是我的第一個javascript / html項目。

我想通過ID關聯的書（book1和price1）傳遞書名及其價格。 我的想法是，這樣，如果以后更改名稱或價格，函數“ addToCart（book1，price1）”將自動傳遞更新后的名稱/價格。 是否可以在javascript / html5中以這種方式將字符串傳遞給函數？

這是代碼的一部分：

<td>
    <span class="bookName" id="book1">
        <b>Artificial Intelligence: Modern Approach</b>
    </span> <br>
    <b>PRICE: $</b> 
    <span id="price1"> 158.55 </span> 
    <button type="button" onclick="addToCart(book1, price1)">Add to cart!</button>
</td>

提前致謝！

Answer 1

的HTML

<button type="button" onclick="addToCart('book1', 'price1')">Add to cart!</button>

JS

function addToCart(productId, priceId) {
    // ...
}

關於您的代碼的其他一些注意事項：

• 使用<br />代替<br> ，否則它是無效的HTML
• 理想情況下，使用<label>標簽，這將使其更易於訪問

例如

<label for="price1">PRICE:</label>
<span>$</span>
<span id="price1">158.55</span>

• 通常最好將事件掛接到單獨的JavaScript文件（或<script>標記）中，而不是HTML屬性中。 這樣可以更清晰地分離您的功能和標記/ UI

Answer 2

假設您使用的是jquery：

onClick="addToCart($(this).siblings('.bookName').text(), $(this).siblings('.price').text())"

這將需要您在價格范圍內放置一個類（ <span class="price">158.55</span> ）。

記住... DOM中的每個元素都“知道”它的位置，您可以在該樹中向上/向下導航以查找附近的相關元素。