jQuery удалить строку из строки не работает

Question

Каждый раз, когда нажимается определенное изображение, я извлекаю некоторую информацию, чтобы добавить эту информацию в строку и после этого заменить текущий url на новый. Это мой код:

jQuery(document).ready(function(){ 
    var kleuren = []; 
    jQuery('.swatch-category-container img').click(function(){ 


     var kleur = jQuery(this).attr('title'); 
     console.log("Selected kleur: " + kleur); 
     var link = jQuery(this).closest('.popup').find('.photo a').prop('href'); 
     kleuren.push(kleur); 
     console.log(kleuren); 
     console.log(kleuren.length); 
     console.log("Fetched link: " + link); 
     var length = kleuren.length -1; 
     var avoid ="?kleur="+kleuren[length]; 

     console.log("Remove string: " + avoid); 

     var news_link = link.replace(avoid,''); 
     var new_link = news_link + "?kleur="+kleur; 

     console.log("Cut string: " + news_link); 

     jQuery('.photo').find('.sendkleur').attr("href", new_link); 


    }); 
}); 

Это прекрасно работает, но предыдущие данные не удаляются.

Например
Когда первый изображение щелкнул kleur = zwart, что информация помещается в URL.
Но когда пользователь нажимает другое изображение после того, что URL будет выглядеть ?kleur=zwart?kleur=beige вместо этого просто из ?kleur=beige

Как я могу удалить первую часть?

Answer 1

Хотя мы могли бы отлаживать логику замены, я думаю, что я пришел бы к этому совершенно по-другому: у меня есть атрибут data-* по ссылке, которая дает исходную версию без kleur, а затем просто повторно ее использовать; Вы даже можете инициализировать его на первом проходе, так что вам не надо обновлять разметку:

var linkElement = jQuery(this).closest('.popup').find('.photo a'); 
var link = linkElement.attr("data-rawhref"); 
if (!link) { 
    link = linkElement.attr("href"); 
    linkElement.attr("data-rawhref", link); 
} 
// ...add kleur to `link` 

Если вам не нужно, чтобы быть на самом деле атрибут, вы можете использовать data вместо этого, но там, наверное, нет реальное преимущество над выше, поскольку ссылка является просто строкой.

var linkElement = jQuery(this).closest('.popup').find('.photo a'); 
var link = linkElement.data("rawhref"); 
if (!link) { 
    link = linkElement.attr("href"); 
    linkElement.data("rawhref", link); 
} 
// ...add kleur to `link` 

---

Но проблема с вашим кодом является то, что вы используете токkleur, а не старый, в avoid:

kleuren.push(kleur);     // Pushes the current kleur at the end 
var length = kleuren.length -1;  // Will be the index of the *current* kleur 
var avoid ="?kleur="+kleuren[length];// ...and so this is looking for the wrong one 

вместо:

var avoid, new_link; 
if (kleuren.length) { 
    avoid = "?kleur="+kleuren[kleuren.length - 1]; 
    new_link = link.replace(avoid,'') + "?kleur="+kleur; 
} else { 
    new_link = link + "?kleur="+kleur; 
} 
kleuren.push(kleur); 

Это предполагает, что вам действительно нужен массив pr тщательно отобранных цветов. Если вы этого не сделаете, просто используйте переменную:

var avoid, new_link; 
if (letzteKleur) { // Meant to be "last color", my German is non-existant 
    avoid = "?kleur="+letzteKleur; 
    new_link = link.replace(avoid,'') + "?kleur="+kleur; 
} else { 
    new_link = link + "?kleur="+kleur; 
} 
letzteKleur = kleur; 

Answer 2

Возможно, потому, что вы никогда не делаете поп в массиве? Как выглядит ваш журнал? Кажется, что вы пытаетесь заменить текущее значение не предыдущим.

kleuren.push(kleur); 
console.log(kleuren); 
console.log(kleuren.length); 
console.log("Fetched link: " + link); 
var length = kleuren.length -1; 
var avoid ="?kleur="+kleuren[length]; 

возможно, что будет делать (конечно, только если есть по крайней мере один элемент в массиве)

console.log(kleuren); 
console.log(kleuren.length); 
console.log("Fetched link: " + link); 
var length = kleuren.length -1; 
var avoid ="?kleur="+kleuren[length]; 
kleuren.push(kleur);