Question

我尽可能简单地做到了这一点

这是我的HTML代码：

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

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

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

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

});

现在的问题是当你点击“点击添加”时它仅向 insideCounter 添加1。我怎样才能获得 outsideCounter 相同的更新级别？我现在已经挣扎了好几个小时，我的大脑已经卡住了，我无法自己解决这个问题。

我现在只锻炼了一个星期的JavaScript，所以请尽量保持简单，因为我甚至无法从以前的答案中找到任何有用的东西，从函数中获取变量＆＃39;

我做了jsfiddle，如果这有助于理解我的问题。

Answer 1

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

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

Answer 2

只需将outsideCounter > p添加到您的选择器：

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

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

4 个答案: