javascript - 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>