如何將后面代碼中的循環創建的 Javascript 函數組合到一個函數中，這樣我就不必重復了？

Question

你如何在 jquery 中運行變量以與 php 中的 foreach 查詢鏈接？

我有一個包含許多圖像的頁面，這些圖像是 iframe 的占位符。 當您單擊 rsPlayBtn div 時，圖像將替換為 iframe。 我能想到的唯一方法是增加 id 和類（$counter），然后為每個函數創建一個 jquery 函數。 這似乎是一種非常低效的 i 方式，圖像/iframe 的數量也是可變的，因此使用這種方法我必須創建大量不會每次都使用的變量。 我怎樣才能將我所做的合並到一個函數中，這樣我就不必重復了？

echo "<div class='rsBtnCenterer' id='{$counter}'><div class='rsPlayBtn'>.";
echo "<img class='{$counter}'..."; 

--------

$('#1').click(function(){
var video = '<iframe src="'+ $('.1').attr('data-video') +'"></iframe>';
$('#1').hide();
$('.1').replaceWith(video);
});

$('#4').click(function(){
var video = '<iframe src="'+ $('.4').attr('data-video') +'"></iframe>';
$('#4').hide();
$('.4').replaceWith(video);
});

Answer 1

我不太清楚你的問題是什么。 我假設最后一個是您的問題：

我怎樣才能將我所做的合並到一個函數中，這樣我就不必重復了？

在我看來，您正在低效地使用 class 和 id。

echo "<div class='rsPlayBtn' id='{$counter}_btn'>";
echo "<img id='{$counter}_img'..."; 


$('.rsPlayBtn').click(function(event){
  var counter = event.target.id.substring(0,1);
  var video = '<iframe src="'+ $("#" + counter + "_img").attr('data-video') +'"></iframe>';
  $("#" + counter + "_btn").hide();
  $("#" + counter + "_img").replaceWith(video);
});

像這樣，您不需要為每個按鈕創建單獨的功能。 jQuery 使用“rsPlayBtn”類找到所有按鈕。 您可以使用 event.target 屬性獲取計數器。 其余的代碼與您的代碼相同，帶有插入的計數器。

如果您想針對單個元素，也應該避免使用 class 屬性。 始終為此使用 id 屬性，它要快得多。 這部分是不好的做法，看看我是如何改變的？：

echo "<img class='{$counter}'...";