Question

RewriteEngine On RewriteBase /bio/ RewriteRule ^([0-9]+)/(.*)$ show_person.php?id=$1&url=$2 [QSA,L] RewriteRule ^job-([0-9]+)/$ show_job.php?id=$1 [QSA,L] RewriteRule ^nationality-([0-9]+)/$ show_nationality.php?id=$1 [QSA,L] RewriteRule ^borg-([0-9]+)/$ show_borg.php?borg=$1 [QSA,L] RewriteRule ^birth-([0-9]+)-([0-9]+)/$ show_birthday.php?day=$1&month=$2 [QSA,L] RewriteRule ^birthyear-([0-9]+)/$ show_birthyear.php?year=$1 [QSA,L] RewriteRule ^death-([0-9]+)-([0-9]+)/$ show_deathday.php?day=$1&month=$2 [QSA,L] RewriteRule ^deathyear-([0-9]+)/$ show_deathyear.php?year=$1 [QSA,L] RewriteRule ^job-([0-9]+)/page/([0-9]+)$ show_job.php?id=$1&page=$2 [QSA,L] RewriteRule ^nationality-([0-9]+)/page/([0-9]+)$ show_nationality.php?id=$1&page=$2 [QSA,L] RewriteRule ^borg-([0-9]+)/page/([0-9]+)$ show_borg.php?borg=$1&page=$2 [QSA,L] RewriteRule ^birth-([0-9]+)-([0-9]+)/page/([0-9]+)$ show_birthday.php?day=$1&month=$2&page=$3 [QSA,L] RewriteRule ^birthyear-([0-9]+)/page/([0-9]+)$ show_birthyear.php?year=$1&page=$2 [QSA,L] RewriteRule ^death-([0-9]+)-([0-9]+)/page/([0-9]+)$ show_deathday.php?day=$1&month=$2&page=$3 [QSA,L] RewriteRule ^deathyear-([0-9]+)/page/([0-9]+)$ show_deathyear.php?year=$1&page=$2 [QSA,L] RewriteRule ^page/([0-9]+)$ index.php?page=$1 [QSA,L] RewriteRule ^sitemap-([0-9]+).xml$ sitemap.php?page=$1和.rules-container拥有相同数量的子元素。
我想使jQuery代码获得rules-buttons的子值并将rules-button.active设置为display:block中“ p”元素的相同子值

我写了jQuery代码，突出显示了图标，但是我不知道如何编写函数的第二阶段。有没有什么方法可以通过jQuery或CSS使之简单？

.rules-container

$(document).ready(function() { 
    $('.rules-button').click(function() {
        if ($('.rules-button').hasClass('active')) {
            $('.rules-button').removeClass('active');
        }
        $(this).addClass('active');
     });
});

.rules-container {
    display: grid;
    background: #f2f2f2;
    text-align: center;
    border-radius: 2px;
    padding: 20px;
    grid-row: 2/3;
    align-items: center;
}

.content .rules-container p {
    color: #080808;
    font: 400 14px 'Open Sans', sans-serif;
}

.content .rules-buttons {
    display: grid;
    grid-row: 3/4;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-items: center;
}

.rules-buttons .rules-button {
    display: grid;
    width: 56px;
    height: 56px;
    background: #1a1a1a;
    border-radius: 50%;
    align-items: center;
    justify-items: center;
    transition: 250ms cubic-bezier(.75, 0, .25, 1);
}

.rules-buttons .rules-button.active {
    background: #ffff00;
    animation: borders-animation 2000ms infinite ease-in-out;
}

.rules-buttons .rules-button img {
    display: grid;
    width: 40px;
    height: 40px;
}

Answer 1

使用index和eq，您可以完成所需的工作。

此外，我更喜欢做的是删除所有内容的类或（隐藏），然后仅将类显示或添加到this而不是使用if语句。

$(document).ready(function() { 
    $('.rules-button').click(function() {
      $('.rules-button').removeClass('active');
      $(this).addClass('active');
      $(".rules-container p").hide();
      $(".rules-container p").eq($('.rules-button.active').index()).show();
    });
    
});

.active{background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rules-container">
   <p>text 1</p>
   <p>text 2</p>
   <p>text 3</p>
</div>
<div class="rules-buttons">
   <div class="rules-button"><img src="icon/lock_open.svg" alt=""></div>
   <div class="rules-button active"><img src="icon/timeline.svg" alt=""></div>
   <div class="rules-button"><img src="icon/explore.svg" alt=""></div>
</div>

Answer 2

$(document).ready(function() { 
    $('.rules-button').click(function() {
        var index = $(this).index()
        if ($('.rules-button').hasClass('active')) {
            $('.rules-button').removeClass('active');
        }
        $(this).addClass('active');
        $(".rules-container > p").eq(index).css({"display": "block"})
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rules-container">
   <p>text 1</p>
   <p style="display: none">text 2</p>
   <p style="display: none">text 3</p>
</div>
<div class="rules-buttons">
   <div class="rules-button active"><img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/owl-158410_640.png" alt=""></div>
   <div class="rules-button"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/39/bald-eagle-309003_960_720.png" alt=""></div>
   <div class="rules-button"><img src="https://cdn.pixabay.com/photo/2014/04/03/00/39/bald-eagle-309003_960_720.png" alt=""></div>
</div>

是否可以获取子编号并在另一个元素上使用相同的编号？

2 个答案: