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>