Question

您好我在同一页面中有2个菜单选项卡，但有不同的ID，并希望使用jQuery处理它。

现在我让它显示并隐藏<div>，但是我无法从正确的tablink中删除该类。

$(document).ready(function(){

    $('.tablinks').click(function(){
        var tab_id = $(this).attr('show');
        var tabHide = $(this).attr('hide');

        $('#tab'+tabHide).removeClass('active');
        $("#date"+tabHide+", #seo"+tabHide+", #links"+tabHide+", #notat"+tabHide).hide();

        $(this).addClass('active');
        $("#"+tab_id).show();
    });

});

我有这个列表器到菜单标签。

然后我得到了2个菜单：

<button id="tab2" hide="2" show="date2" class="tablinks active">Dato</button>
<button id="tab2" hide="2" show="seo2" class="tablinks">SEO</button>

和

<button id="tab3" hide="3" show="date3" class="tablinks active">Dato</button>
<button id="tab3" hide="3" show="seo3" class="tablinks">SEO</button>

任何人都可以在这里指导我吗？

我的循环：

$x = mysqli_query($mysql_link, "SELECT * FROM dagenshug_imageslider");
    while ($row = mysqli_fetch_assoc($x)) {

        $imageslider = $row;

        echo "
        <div style=\"width: 98%; border: 1px solid #dddedf; border-radius: 5px; min-height: 100px; margin-top: 15px; overflow: hidden; min-height: 335px;\">
            <div style=\"margin: 8px; border-bottom: 1px solid #dddedf;\"><img src=\"https://dagenshug.dk/NewBackOffice/gfx/icons/payment-icon.jpg\" style=\"padding-right: 5px;\">#".$imageslider['id']." - Unique click: ".$imageslider['clicks']."</div>
            <div style=\"clear: both; float: left; width: 20%; margin: 10px;\"><img src=\"https://dagenshug.dk/gfx/banner/".$imageslider['image_link']."\" style=\"width: 100%;\"></div>
            <div style=\"float: left; width: 75%; margin: 10px;\">
                <div class=\"tab\">
                    <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"date".$imageslider['id']."\" class=\"tablinks active\">Dato</button>
                    <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"seo".$imageslider['id']."\" class=\"tablinks\">SEO</button>
                    <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"links".$imageslider['id']."\" class=\"tablinks\">Links</button>
                    <button id=\"tab".$imageslider['id']."\" hide=\"".$imageslider['id']."\" show=\"notat".$imageslider['id']."\" class=\"tablinks\">Notat</button> 
                  </div>
                <div id=\"date".$imageslider['id']."\" class=\"tabcontent\" style=\"display: block\">
                    <b>Start dato</b><br>
                    <br>
                    <input type=\"date\" id=\"startdate\" class=\"input-imageslider\" value=\"".$imageslider['date_start']."\"><br>
                    <br>
                    <b>Slut dato</b><br>
                    <br>
                    <input type=\"date\" id=\"enddate\" class=\"input-imageslider\" value=\"".$imageslider['date_end']."\"><br>
                    <br>
                </div>
                <div id=\"seo".$imageslider['id']."\" class=\"tabcontent\" style=\"border: 0px;\">
                    <b>Alt tekst</b><br>
                    <br>
                    <textarea cols=\"80\" rows=\"11\" class=\"input-imageslider\">".$imageslider['alt_text']."</textarea>
                </div>
                <div id=\"links".$imageslider['id']."\" class=\"tabcontent\">
                    <b>Link til side</b><br>
                    <br>
                    <input type=\"date\" id=\"startdate\" class=\"input-imageslider\" value=\"".$imageslider['date_start']."\"><br>
                    <br>
                    <b>Slut dato</b><br>
                    <br>
                    <input type=\"date\" id=\"enddate\" class=\"input-imageslider\" value=\"".$imageslider['date_end']."\"><br>
                    <br>
                </div>
                <div id=\"notat".$imageslider['id']."\" class=\"tabcontent\">
                    <h3>Notat</h3>
                </div>
            </div>
        </div>";


    }

Answer 1

您的问题是您有重复的ID。

jQuery id selector $("#myId")只会带一个元素，即使有几个元素也是如此。

因此，对于您的情况，最快的解决方案是用the attribute equals selector替换id选择器。换句话说，改变自：

$("#myDuplicatedId")

到

$("[id=myDuplicatedId]")

在您的代码中，这意味着将这些中间行更改为：

$('[id=tab'+tabHide+']').removeClass('active');
$("[id=date"+tabHide+"], [id=seo"+tabHide+"], [id=links"+tabHide+"], [id=notat"+tabHide+"]").hide();

检查demo fiddle here。

话虽如此，如果可能，最好删除那些重复的ID - 这是无效的HTML - 而使用类。

这里是demo fiddle of how that (using classes instead of IDs) would work。这就是我的所作所为：

从<button>
更改了JS代码的第7行。
- 您可能还需要更改第8行......

Jquery删除多个（重复）ID上的类

1 个答案: