JQuery onclick覆蓋div

Question

我正在努力學習JS，我正在嘗試制作簡單的應用程序。 現在我遇到了一些問題。

 var animals = [ { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0} ] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function(){ $( "#pas" ).one( 'click', function(){ brojac++ var heading = $('<h1>'); heading.text(animals[0].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function(){ brojac += 1; $("#increment").text(brojac); }); $( "#macka" ).one( 'click', function(){ clicks++ var heading = $('<h1>'); heading.text(animals[1].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function(){ clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div> 

當我點擊DOG然后CAT我的兩個都出現在屏幕上，但這不是我想要的。 當我按下CAT時我希望它覆蓋DOG，因此屏幕上只顯示一個，我希望計數器繼續計算點擊次數。 這里也是JSBin所以你可以更好地了解發生了什么： http ：//jsbin.com/pebefu/edit？html，js，output

Answer 1

您不必繼續刪除和追加元素。 您可以使用以下內容簡化代碼並重用元素：

https://jsfiddle.net/tqoymucy/

注意：在許多情況下，最好從頭開始創建兩個動物的html，並切換每個動物的可見性。 如果你有許多不同的動物，下面的解決方案會更好。

 var clicks = [0 , 0]; var animals = [{ name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0 }, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0 }]; $(document).ready(function() { $(".animalSelector").one('click', function() { $('#activeAnimal').removeClass("hidden"); }); $('#pas').click(function() { changeAnimal(0); }); $('#macka').click(function() { changeAnimal(1); }); function changeAnimal(index) { clicks[index] += 1; $('#animalHeader').text(animals[index].name); $('#animalImage').attr("src", animals[index].url); $("#increment").text(clicks[index]); } }); 

 .animalSelector { cursor: pointer; } #macka { margin-left: 3em; cursor: pointer; } #activeAnimal.hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas" class="animalSelector">Dog</span> <span id="macka" class="animalSelector">Cat</span> </section> <div class="container" id="podaci"> <p class="placeholder">This is where it goes</p> <div id="activeAnimal" class="hidden"> <h1 id="animalHeader"></h1> <img id="animalImage" /> <p class="clickCounter">Number of clicks: <span id="increment">0</span></p> </div> </div> 

Answer 2

你只需要在每次開始附加內容之前empty() #podaci

$( "#pas" ).one( 'click', function(){
    brojac++
    var heading = $('<h1>');
    $("#podaci").empty();   /// --- THIS IS A NEW LINE
    heading.text(animals[0].name);
    $('#podaci').append(heading);

    var slika = $('<img src=' + animals[0].url + '>');
    $('#podaci').append(slika);

    var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); 
    $('#podaci').append(brojac);
});

這將清空你的容器並准備用你的新動物重新裝滿。

 var animals = [ { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0} ] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function(){ $( "#pas" ).one( 'click', function(){ brojac++ var heading = $('<h1>'); heading.text(animals[0].name); $("#podaci").empty(); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function(){ brojac += 1; $("#increment").text(brojac); }); $( "#macka" ).one( 'click', function(){ clicks++ var heading = $('<h1>'); heading.text(animals[1].name); $("#podaci").empty(); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function(){ clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div> 

Answer 3

試試這個，你需要刪除id =“podaci”的div中的內容。

 var animals = [{ name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0 }, { name: "Cat", url: 'https://media3.giphy.com/media/o0vwzuFwCGAFO/200_s.gif', clicks: 0 }] // animals[0].name // animals[0].url // animals[0].clicks var brojac = animals[0].clicks; var clicks = animals[1].clicks; $(document).ready(function() { $("#pas").on('click', function() { brojac++ $('#podaci').empty(); var heading = $('<h1>'); heading.text(animals[0].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[0].url + '>'); $('#podaci').append(slika); var brojac = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[0].clicks + '</span>' + '</p>'); $('#podaci').append(brojac); }); $('#pas').click(function() { brojac += 1; $("#increment").text(brojac); }); $("#macka").on('click', function() { clicks++ $('#podaci').empty(); var heading = $('<h1>'); heading.text(animals[1].name); $('#podaci').append(heading); var slika = $('<img src=' + animals[1].url + '>'); $('#podaci').append(slika); var clicks = $('<p class="test">' + 'Number of clicks:' + '<span id="increment">' + animals[1].clicks + '</span>' + '</p>'); $('#podaci').append(clicks); }); $('#macka').click(function() { clicks += 1; $("#increment").text(clicks); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <span id="pas">Dog</span> <span id="macka">Cat</span> </section> <div class="container" id="podaci"> This is where it goes </div>