从函数jquery获取更新的变量值

Question

I made this as simple as I could

Here is my HTML code:

    <div id="outsideCounter"><p></p></div>

    <div id="clickToAdd"><p>Click me</p></div>

    <div id="insideCounter"><p></p></div>

And here is the javascript:

$(document).ready(function(){

    var level = 1; // start the counting at 1

    $('#outsideCounter > p').html(level); // show value of the first counter


        $('#clickToAdd').click(function(){ 

            level++; // I want this to add both counters, not just the insideCounter

            $('#insideCounter > p').html(level); // show value of the second counter
        });

});

Now the problem is that when you click 'clickToAdd' it adds 1 only to the insideCounter . How could I get that same updated level to the outsideCounter ? I've been struggling with this for hours now and my brains are so jammed I can't figure this out on my own.

I have been exercising javascript only for a week now so please try to keep it as simple as possible because I couldn't even find anything useful from the previous answers about 'getting variable from function'.

I made jsfiddle if that helps to understand my problem.

Answer 1

您可以用逗号分隔选择器,但由于两个ID都以Counter结尾，因此您可以通过组合使用属性选择器的结尾来使用该模式。

$('[id$=Counter] > p').html(level);

Answer 2

Simply add outsideCounter > p to your selector:

$('#insideCounter > p, #outsideCounter > p').html(level);

Fiddle

Answer 3

$(document).ready(function(){

    var level = 1; // start the counting at 1

    $('#outsideCounter > p').html(level); // show value of the first counter


        $('#clickToAdd').click(function(){ 

            level++; // I want this to add both counters, not just the insideCounter 

            $('#insideCounter > p, #outsideCounter > p').html(level); // show value of the second counter
        });

});

Answer 4

$(document).ready(function () {

var level = 1; // same variable for both counter

$('#outsideCounter > p').html(level); // show first counter

$('#clickToAdd').click(function () {
    level++; // this only adds insideCounter
    $('#insideCounter > p, #outsideCounter > p').html(level);
  }); 
});