我有一個 jquery 代碼，可以在某些頁面上插入和預先添加面包屑。我通過可以撰寫 JS 的第三方工具注入此代碼。我只想要某些頁面的這些面包屑。
這是我在桌面上運行良好的原始代碼：
var style = document.createElement("style");
style.id = "Imdone";
style.textContent = ".breadcrumbs-mai{color:#555; font-size:14px; width:100%; padding:10px 5px;font-weight:200;}";
document.querySelector("head").appendChild(style);
require(['jquery'], function($){
$(document).ready(function() {
var bread = $('<div class="breadcrumbs-mai"><a href="https://www.norli.no">Hjem </a>/ <a href="https://www.norli.no/">Test </a>/ <a href="https://www.norli.no/">Test2 </a>/ <a href="https://www.norli.no/">test 3</a>/ <a style="color:#000; font-weight:600;" href="https://www.norli.no/">Test 4 </a></div>').prependTo('#page-title-heading');
});
});
li在移動設備上，通過單擊專案更改類別后，它沒有加載。所以我添加$('body').change(runbread);了使其在切換類別時出現（單擊類別時頁面不會在移動設備上重繪 ，僅在桌面上重繪 ）。
但是現在，它在移動設備上加載兩次，在桌面上加載三次。
這是我的 JS：
var style = document.createElement("style");
style.id = "Imdone";
style.textContent = ".breadcrumbs-mai{color:#555; font-size:14px; width:100%; padding:10px 5px;font-weight:200;}";
document.querySelector("head").appendChild(style);
require(['jquery'], function($){
$(document).ready(function() {
$("body").change(runbread);
});
function runbread(){
var bread = $('<div ><a href="https://www.norli.no">Test </a>/ <a href="https://www.norli.no/">Test 2 </a>/ <a href="https://www.norli.no/">Test 3 </a>/ <a href="https://www.norli.no/">Test 4</a>/ <a style="color:#000; font-weight:600;" href="https://www.norli.no/">Test 5</a></div>').prependTo('#page-title-heading');
}
});
如何確保它不會多次加載？
因此，在移動設備上，它應該在頁面加載時加載并在單擊專案時再次重新加載li（沒有頁面重新加載，只有內容更改）。僅在頁面加載時在桌面上。
感謝任何幫助！
uj5u.com熱心網友回復：
您可以添加$('#page-title-heading .breadcrumbs-mai').remove()到runbread函式的開頭。
這將洗掉.breadcrumbs之前可能添加的任何其他內容。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/468033.html
標籤：javascript html jQuery css