显示/隐藏相同的 div class 嵌套在不同的 div 中 javascript 基于变化的数字

Question

所以我正在尝试 show/hide div class 基于 "page" 处于活动状态（一个不断变化的数字）。所以我有一个动态的页面数，由 publication.realpages.length 表示，我有相同数量的 main/sub/target divs。我想在每个单独的位置显示目标 class，具体取决于我们所在的页面 o

所以我的 html 总是

 <div id="main">
    <div id="sub">
       <div class="target"></div>
   </div>
 </div>


  <div id="main2">
    <div id="sub2">
       <div class="target"></div>
   </div>
 </div>

我现在的javascript是

    publication.on('page', function(page) {
    var currpage = page.realIndex + 1
    var pubpage = publication.realPages.length
    if (currpage == 1) {
    (".target").show();
    };
   });

我试过 for( i = 0, i >= pubpage, i++); 但我不明白如何让 div 中的每个目标在那之后真正出现。

currpage = current active page
pubpage = total number of pages

我基本上是在寻找一种解决相同 class 但具有不同父级的方法。也是一种我不必为每个页面编写 currpage === 1、currpage === 2 等的方法。

Answer 1

如果您有 currpage，您可能想这样做 (quick fiddle)：

var mainId = "#main" + currpage;
var subId = "#sub" + currpage;
var accessor = mainId + " " + subId + " .target";
$(accessor).show();

显示/隐藏相同的 div class 嵌套在不同的 div 中 javascript 基于变化的数字

Showing / hiding same div class nested in different div's with javascript based on changing number

html

javascript

css

jquery