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，然后切换每个动物的可见性。如果你有许多不同的动物，下面的解决方案会更好。

＆＃13;

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]);
  }    
});

＆＃13;

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

＆＃13;

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

＆＃13;

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 =＆＃34; podaci＆＃34;删除div中的内容。

＆＃13;

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);
  });

})

＆＃13;

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

＆＃13;

JQuery onclick覆盖div

3 个答案: