如何引用幾個HTML元素，用於JavaScript/jQuery函數？

我有一個問題，我的代碼，因爲我通常使用（對於按鈕，例如）的ID來指代元件，如：如何引用幾個HTML元素，用於JavaScript/jQuery函數？

$(document).ready(function() { 
    $('.delete_imgs').click(function() { 
     id = $(this).attr('id'); 
     $('.confirm_delete').css({ 
      visibility: "visible" 
     }); 
    }); 
});

所以上面的存在，如果任何.delete_imgs按鈕點擊，然後執行該功能。並且還使用this函數將指向HTML文檔中被點擊的元素。

上面id「s是一個PHP函數這裏：

   while($stmt -> fetch()){ 
        echo "<tr><td> 
<img class='delete_imgs' id='$matchid' src='Images/delete_icon.png'> 
<img class='edit_imgs' id='$matchid'src='Images/edit_icon.png'></td> 
          <td>$hero</td> 
          <td>$result</td> 
          <td>$gamemode</td> 
          <td>$mmr</td> 
          </tr>";   
       }

這是精中加入edit_imgs圖像之前，由於所有的delete_imgs將具有不同的ID（匹配ID是唯一的）。但是現在，我不應該同時編輯和刪除具有相同ID的圖像，所以我不確定如何將它們引用到JavaScript/jQuery函數。

我道歉，如果這是一個相當寬泛的問題，我可以根據需要添加更多的信息：

較短版本的問題：你如何參考幾個HTML元素，而無需使用ID或類？

編輯：這是我最終將要使用的ID爲：

function deletematch(){ 
    $.ajax({ 
     type:"POST", 
     url:"php/RemoveMatch.php", //This code sends the variable with the match 
     data: "match_id=" + id, //id in it to the php file and executes the deletion. 
     success: function(){ 
      alert("The match has been deleted"); 
      $('.confirm_delete').css({visibility:"hidden"}); 
     } 
    }); 
}

的editmatch尚未編碼。

來源

2014-02-06 k4kuz0

可以指定在jQuery選擇多個匹配：$（ 'delete_imgs，.edit_img'）' – hindmost

@Hindmost但問題'，是我需要做2個獨立功能，根據您是否點擊「刪除」圖像或「編輯」圖像執行。這兩個函數都需要有一個重要的變量，即「id」變量，它指的是隨後刪除/編輯的數據。我給他們這個變量的方式是用ID/Classes，但是如果沒有重複的ID，我就不能這麼做。 – k4kuz0

您可以使用重複的ID，這不會被棄用。 – hindmost

嘗試使用數據屬性而不是「id」。這樣他們可以共享相同的ID而不必違反標準。請注意，我假設「delete_imgs」和「edit_imgs」有它們自己的風格，所以我避免改變它們。

while($stmt -> fetch()){ 
    echo "<tr><td> 
     <img class='delete_imgs' data-id='$matchid' src='Images/delete_icon.png'> 
     <img class='edit_imgs' data-id='$matchid'src='Images/edit_icon.png'></td> 
     <td>$hero</td> 
     <td>$result</td> 
     <td>$gamemode</td> 
     <td>$mmr</td> 
    </tr>";   
}

然後，您可以得到ID在你的JS像這樣：

$('.delete_imgs').click(function() { 
    id = $(this).data('id'); 
});

您也可以選擇兩者：

$('[data-id="id-goes-here"]').click(function() { 
    // do something 
});

但是，如果你想有一個簡單的方法來指代給他們兩個不知道ID，我會添加另一個數據屬性或類。例如

// You can use the selector above: $('[data-type="action"]') 
<img class='delete_imgs' data-type="action" data-id='$matchid' src='Images/delete_icon.png'> 
<img class='edit_imgs' data-type="action" data-id='$matchid'src='Images/edit_icon.png'>

或者

// Select with: $('.action') 
<img class='delete_imgs action' data-id='$matchid' src='Images/delete_icon.png'> 
<img class='edit_imgs action' data-id='$matchid'src='Images/edit_icon.png'>

來源

2014-02-06 09:43:20 lnoogn

謝謝您的全面回答。我喜歡數據類型的想法，我會測試它。問候。 – k4kuz0

試試這個

$(document).ready(function(){ 
     $('.delete_imgs').click(function(){ 
      id = $(this).attr('id'); 
      $('.confirm_delete').css({visibility:"visible"}); 
     }); 

     $('.edit_imgs').click(function(){ 
      id = $(this).attr('id'); 
      // do your edit work here 
     }); 
});

來源

2014-02-06 09:07:20

使用相同ID的兩個元素是不是在HTML建議。附加一些反像

<img class='delete_imgs' id='$matchid + _counter' src='Images/delete_icon.png'> 
<img class='edit_imgs' id='$matchid + _counter'src='Images/edit_icon.png'>

對於您的情況是指像ID後，

$('img.delete_imgs').click(function() { 
    //Your logic goes here 
}); 

$('img.edit_imgs').click(function() { 
    //Your logic goes here 
});

或

$('img.delete_imgs, img.edit_imgs').click(function() { 
    //Your logic goes here 
});

來源

2014-02-06 09:08:24

'id ='$ matchid + _counter''的問題是我最終使用ID告訴我的PHP腳本使用Ajax，我希望ID = $ matchid的所有行都被刪除/編輯。櫃檯會不會混亂？ – k4kuz0

在這種情況下，直接附加一個字符串並將屬性更改爲類。 –

你在用ID做什麼？我沒有看到它在你的JavaScript代碼中的任何用法。 –

試試這個我想這會工作.... example here

$('img#matchid .delete_img').click(function(){...});

來源

2014-02-06 09:08:43 kamesh

在t他的情況下，當你有多個元素時，你應該使用類。

  while($stmt -> fetch()){ 
       echo "<tr><td> 
         <img class='delete_imgs '".$matchid." src='Images/delete_icon.png'> 
         <img class='delete_imgs '".$matchid." src='Images/edit_icon.png'></td> 
         <td>$hero</td> 
         <td>$result</td> 
         <td>$gamemode</td> 
         <td>$mmr</td> 
         </tr>";   
      }

現在，您可以使用$(.delete_imgs.desiredMatchId)

您也可以同時使用這樣的：

$(img.class.class)

來源

2014-02-06 09:08:56 Manolo

我是否正確地假設您可以特別參考兩個類中的一個？這是你用'$（img.class.class）'演示過的嗎？如果是這樣的話，那也許是我的解決方案 – k4kuz0

是的。這就是我的意思 – Manolo

好了，只需快速總結（對不起，我對編碼頗爲陌生），如果你有元素'

'和div'

'，然後使用'$（div.1.2）'。你只是指前一個div而不是後一個？ – k4kuz0

如何使用這樣的事情：

function clickFunction(){ 
    if(this.alt == 'delete'){ 
     ... 
    } 
    if(this.alt == 'edit'){ 
     ... 
    } 
};

然後給你的按鈕ALT值「刪除」或「編輯」。

來源

2014-02-06 09:10:05 ElDoRado1239

如何引用幾個HTML元素，用於JavaScript/jQuery函數？

回答

相關問題