複製HTML塊用標籤腳本

我有這樣的html代碼：複製HTML塊用標籤腳本

<div> 
    <div id="text">text></div> 
    <script>$("#text").val('some value');</script> 
</div>

我通過.clone()和內部編輯HTML複製這個網站。結果：

<div> 
    <div id="1-text">text></div> 
    <script>$("#text").val('some value');</script> 
</div>

我想更改標記腳本中的id。 $("#1-text").val('other value'); 我該怎麼辦？

來源

2016-07-14 Dev

我認爲應該有更好的解決方案克隆腳本元素。而divs沒有價值。 – epascarello

我建議不要這樣做。因爲在腳本元素中編輯JS會非常困難。 – evolutionxbox

我需要複製HTML，我需要它的處理程序，我怎樣才能以另一種方式做到這一點？我不知道確切的金額塊，所以我不能一次寫所有的處理程序 – Dev

您可以簡單地向外部添加一個變量，動態地告訴您要選擇什麼。所以，如果你使用的是循環通過自己的價值觀來迭代你可以做這樣的事情：

$("#text_"+i).val('other value');

您還可以設置一個計數器和新的div添加了我的增量。所以它很靈活。

我不確定你的最終目標是什麼，但如果你試圖操作<script>標記中的javascript，我不會推薦這種方法。我相信這會很麻煩。

來源

2016-07-14 13:51:46

這是好方法，但我尋求靈活的解決方案。腳本內部還有許多其他功能，如日期選擇器和手機模板。如果我複製html塊，我想獲得前一個塊的所有功能。 – Dev

如果你想複製整個html塊，你應該將你的內聯javascript代碼綁定到這個塊作爲容器。不是id。因此，當您移動或複製塊時，您的腳本將能夠找到與容器相關的任何元素。

<div id="containerOne" class="js-container"> 
    <div class="js-text" data-text="some value">some value</div> 
    <script> 
     var $el = $("script").last().closest(".js-container").find(".js-text"); 
     $el.text($el.data("text")); 
    </script> 
</div>

因此，您可以通過class not id訪問元素。注意使用「js-」前綴僅用於JavaScript操作而不用於CSS樣式。

此外，您不需要更改腳本本身。您可以通過「data-」屬性更改值。

在你的外部腳本中，你可以用各種方法封裝任何克隆邏輯。例如：

var myModule = { 
    clone: function(containerSelector) { 
    var $donorEl = $(containerSelector); 
    var $donorScript = $donorEl.find('script'); 
    $script = $("<script />"); 
    $script.text($donorScript.text()); 
    $recipientEl = $donorEl.clone(); 
    $recipientEl.attr('id', 'containerTwo'); 
    var newValue = 'other value'; 
    $('.js-text', $recipientEl).data('text', newValue); 
    $('body').append($recipientEl); 
    $('script', $recipientEl).replaceWith($script); 
    } 
}; 

myModule.clone('#containerOne');

你可以看到the working example。

來源

2016-07-19 21:32:36 pythagor

複製HTML塊用標籤腳本

回答

相關問題