在JavaScript中獨立定位while循環的每個元素？

Question

我的網站包含大量圖片。 它們使用while循環動態顯示。 我想讓用戶能夠將自己喜歡的圖片保存到個人收藏中。 我在每張圖片上都有一個按鈕，可觸發兩個javascript函數：

1. 將按鈕的文本從“保存”切換到“取消保存”，從“取消保存”切換到“保存”
2. 在數據庫中創建或刪除相應的記錄

這是PHP（ if (in_array($itemId, $saved)) {}用於顯示不同的按鈕，無論圖片是否已保存。

<?php
    if (!in_array($itemId, $saved)) {
?>                                  
    <button class="item-save" id="save" type="button" value="<?php echo $itemId; ?>" onclick="saveSwitch(this.id); saveItem();">Save</button>

    <button class="item-save item-act-save-unsave-hide" id="unsave" type="button" value="<?php echo $itemId; ?>" onclick="saveSwitch(this.id); unsaveItem();">Unsave</button>
<?php
    } else {
?>
    <button class="item-save" id="unsave" type="button" value="<?php echo $itemId; ?>" onclick="saveSwitch(this.id); saveItem();">Unsave</button>

    <button class="item-save item-act-save-unsave-hide" id="save" type="button" value="<?php echo $itemId; ?>" onclick="saveSwitch(this.id); unsaveItem();">Save</button>
<?php
    }
?>

和Javascript函數：

<script type="text/javascript">
// Switch between "Save" and "Unsave" buttons
function saveSwitch(id) {
    if(id == "save") {
        document.getElementById("unsave").style.display="inline";
        document.getElementById(id).style.display="none";
    } else {
        document.getElementById("save").style.display="inline";
        document.getElementById(id).style.display="none";
    }
}

// save: creates new record in "saves" table
function saveItem() {
    var item_id = $("#save").val();
    $.ajax({
        type: "POST",
        data: {"item_id": item_id},
        url: "save.php",
    });
}

// unsave: deletes existing record in "saves" table
function unsaveItem() {
    var item_id = $("#unsave").val();
    $.ajax({
        type: "POST",
        data: {"item_id": item_id},
        url: "unsave.php",
    });
}
</script>

一切正常，但問題是我使用它們的ID作為元素（圖片）的目標，因此不同的按鈕，變量和值僅影響第一張圖片。

我是Java語言的新手，我看不到應該如何獨立定位每個元素。 有任何想法嗎？

Answer 1

如果您更新了生成代碼以將值傳遞給saveItem / unsaveItem ：

<button class="item-save" id="save" type="button" value="<?php echo $itemId; ?>" 
    onclick="saveSwitch(this.id); saveItem(this.value);"
>Save</button>

然后更新這些函數以將該值接受為itemId ，那么您就不需要計算該值了？

（請注意，Ricky Sett是正確的；您實際上不應該在標記中重復ID。）

Answer 2

您是否嘗試過在圖片中添加類別名稱而不是ID。 實際上，ID應該是唯一的，並且不應在頁面中重復。

$(".pictureClassName").each(function(){
    var picturevalue = $(this).val()
    --Do something with value
});

如果您要定位特定的圖像，則可以使用該ID，但可以使其唯一。