JQuery onclick override div

Question

JSを学ぼうとしていて、簡単なアプリを作ろうとしています。今私はいくつか問題があります。私は犬をクリックして、私のCAT両方それらの両方が画面に表示されますが、これは私が欲しいものではありません

var animals = [ 
 
\t { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, 
 
\t { 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>

。私がCATを押すと、DOGをオーバーライドしたいので、1つだけが画面に表示され、カウンタがクリック数をカウントし続けるようにします。 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

あなたはちょうどあなたがものを追加する開始する前に、各時間

$("#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); 
}); 

これはあなたのコンテナを空にすることを準備するempty()#podaciする必要があります：あなたはより良い何が起こっているかを理解することができるように もここJSBinですあなたの新しい動物を補充してください。

var animals = [ 
 
\t { name: "Dog", url: 'https://animal-health.co.uk/media/wysiwyg/alfie-dog.png', clicks: 0}, 
 
\t { 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>