将 ID 属性更改为 Class

Question

我是一个 JS 初学者，我为下拉菜单编写了一个 JS 代码，它工作得很好，但是由于 wordpress 配置我需要更改我的代码。现在不是ID的属性而是Class，名字还是一样，只是想把ID改成class.

这是我的小 JS 代码：

var linkId = "dropdown-" + $(this).attr("id");
                if ($('.dropdown-sub').is(':animated')){
                    //do nothing
                } else {
                    $('.dropdown-sub').each(function() {
                        if ($(this).attr("id") !== linkId) {
                            if($(this).hasClass('open-dd')) {

                                $(this).slideUp();
                            }
                            $(this).removeClass('open-dd');
                        } else {
                            if($('#' + linkId).hasClass('open-dd')) {

                                $('#' + linkId).slideUp();
                                $('#' + linkId).removeClass('open-dd');
                            }
                            else {
                                $('#' + linkId).slideDown();
                                $('#' + linkId).addClass('open-dd');
                            }
                        }
                    }); 
                }
            });
        });

HTML:

<nav id="menu-link" class="menu-link cacher-menu">
            <ul class="optionel">
                <li  class="first primary-nav first">
                    <a><span class="menu-text">Un groupe individuel en évolution</span></a>
                    <span class="font-awesome f1"></span>
            <div class="dropdown-sub dropdown-first">
                <div class="dd-e">
                    <ul>
                        <li>
                            <a href="#">200 ans d'histoire</a>
                        </li>
                        <li>
                            <a href="#">Une multitude d'activités</a>
                        </li>
                        <li>
                            <a href="#">Une mosaïque de sociétés</a>
                        </li>
                        <li>
                            <a href="#">Une présence internationale</a>
                        </li>
                        <li>
                            <a href="#" class="last">Des femmes et des hommes</a>
                        </li>
                    </ul>
        </div>

如果您想了解有关此问题的更多信息，请直接问我。谢谢你。安德鲁·伯纳德

Answer 1

根据您的代码，

只有列表 li 将 ID first 更改为 class first。

所以在那种情况下，

 <li  class="first primary-nav first">


var linkId = "dropdown-" + $(this).attr("class").split(" ").pop();

这将 return 你 first class。但它基于 first 将始终位于末尾的假设。

如果是开头的话,

var linkId = "dropdown-" + $(this).attr("class").split(" ").shift();

shift将return你class开头。

现在在你的

里面

 $('.dropdown-sub').each(function() {
                        if ($(this).attr("id") !== linkId) {

检查class dropdown-first是否可用：

if (!$(this).hasClass(linkId)) {

这将检查 dropdown-first 是否可用。

So your entire code will be come:

$(function () {
$("nav li").click(function () {
    var linkId = "dropdown-" + $(this).attr("class").split(" ").pop();
    if ($('.dropdown-sub').is(':animated')) {
        //do nothing
    } else {
        $('.dropdown-sub').each(function () {
            if (!$(this).hasClass(linkId)) {
                if ($(this).hasClass('open-dd')) {

                    $(this).slideUp();
                }
                                              $(this).removeClass('open-dd');

            } else {
                if ($('.' + linkId).hasClass('open-dd')) {

                    $('.' + linkId).slideUp();
                    $('.' + linkId).removeClass('open-dd');
                } else {
                    $('.' + linkId).slideDown();
                    $('.' + linkId).addClass('open-dd');
                }
            }
            });
        }
    });
});

DEMO

Answer 2

一个 id selector in jQuery 看起来像这样（你已经知道了）：

$("#my_id_name")

a class select 或 jQuery 看起来像这样：

$(".my_class_name")

所以你只需要在 select class 之前添加一个 . 而不是 #。只需在您的代码中更改它，您应该没问题

将 ID 属性更改为 Class

Changing ID attributes to Class

javascript

jquery

nav