Question

我实际上是想从导航中的某些链接中获取ID。当我点击其中一个时，一些文字消失了CSS（显示：无）和你要检查的文字......出现... 问题是，当我点击链接时，警报没有出现，我没有收到任何值。

NAV的HTML

<nav id="options" class="work-nav">
      <ul id="filters" class="option-set">
           <li><a id="obras_link" class="selected">Obras expuestas</a></li>
           <li><a id="exposiciones_link">Exposiciones</a></li>
           <li><a id="bibliografia_link">Bibliografía</a></li>
      </ul>
</nav>

JQuery的

$(document).ready(function() {
$("#filters li a").click(function() {
    var currentID = $(this).attr('id');
    alert(currentID);
    /*if(currentID = "")
            $("obras_link").addClass("selected");
            $("exposiciones_link").removeClass("selected");
            $("bibliografia_link").removeClass("selected");

            $("#obras_expuestas").css("display", "block");
            $("#exposiciones").css("display", "none");
            $("#bibliografia").css("display", "none");
        break;

        case "exposiciones_link":
            $("obras_link").removeClass("selected");
            $("exposiciones_link").addClass("selected");
            $("bibliografia_link").removeClass("selected");

            $("#obras_expuestas").css("display", "none");
            $("#exposiciones").css("display", "block");
            $("#bibliografia").css("display", "none");
        break;

        case "bibliografia_link":
            $("obras_link").removeClass("selected");
            $("exposiciones_link").removeClass("selected");
            $("bibliografia_link").addClass("selected");

            $("#obras_expuestas").css("display", "none");
            $("#exposiciones").css("display", "none");
            $("#bibliografia").css("display", "block");
        break;
    }*/
});

}）;

它甚至不会在控制台中出现错误。我已经在HTML中实现了JQuery库和脚本...所以...我认为ID.click值是错误的......任何想法？谢谢你的帮助

Answer 1

为什么不根据类开启项目而不是具有所有特定于id的逻辑？

HTML：

<nav class="work_nav">
      <ul class="option_set">
           <li><a class="option selected">Obras expuestas</a></li>
           <li><a class="option">Exposiciones</a></li>
           <li><a class="option">Bibliografía</a></li>
      </ul>
</nav>

注意：我将课程更改为work_nav和option_set，因为-不应在ID或类名中使用。

使用Javascript：

$('.option').click(function(){
    $selectedLink = $(this);
    $optionsInSet = $selectedLink.closest('option_set').find('.option');
    // turn off display of all options
    $optionsInSet.removeClass('selected').css('display', 'none');
    // turn on display of selected option
    $selectedLink.addClass('selected').css('display', 'block');
});

我不完全理解为什么你需要添加/删除类和更改CSS显示属性（我认为你可以将该属性分配给类），因此可能有更多的简化空间。 / p>

这种方法更加灵活，因为您可以将.option个元素嵌套在某个.option_set容器中的任何DOM元素集分配给此行为。它不必限于ul / li / a结构。您还可以考虑使用此方法将点击事件处理放在围绕li元素的a附近。

使用这种方法，您可以在页面上定义任意数量的此类选项集，而无需担心id。您可以确保所有.options都是定义选项分组的包含.option_set的后代。

现在我并没有真正遵循如何点击取消选择的选项，因为您将显示设置为无，但我再也不了解您在游戏中使用的完整CSS。也许你的意图是只允许某人选择一个选项，然后再也无法进行任何更改，这种方法就可以了。

试图从与JQuery的链接中获取ID

1 个答案: