如何向 Javascript 添加条件语句（使用元素 ID 作为条件）？

Question

我再次向 StackOverflow 的优秀用户提出另一个基本问题。我是客户端编程的新手，尽管这是我所知道的其他语言中相当基本的示例，但我不确定此处执行此操作的正确语法（如果已实现）。

这是我当前的代码。作为参考，可以在 http://paysonfirst assembly.com/ 找到该页面。但是，我还没有上传最新版本，并且生产服务器上尚不存在以下功能。

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () {
        $subnavContainer.show("slow");
    });

这是我最近更新的代码。单击后该 div 不会重新出现，但会弹出警告框。

var $subnavContainer = $(".subwrapperBlue");
$(function () {
    $(".navElements").click(function () {
        switch ($(this).index()) {
            case 0:
                $subnavContainer.html("some html");
                break;
            case 1:
                $subnavContainer.html("some more html");
                break;
            case 2:
                $subnavContainer.html("some other html");
                break;
            case 3:
                $subnavContainer.html("the final html");
                break;
        }
        $subnavContainer.show("slow");
        alert("this works");
    });

Answer 1

您可以检查元素的索引。它以 0 作为第一个，1 作为第二个，等等：

if ($(this).index() == 0) {
  $subnavContainer.html("some html");
}

$(this) 指的是被单击的元素。

---

与其执行长 if {} else if {} ... 链，为什么不使用 switch 呢？在我看来，它更加简洁，因为您可以内联 break;：

switch ($(this).index()) {
  case 0:
    $subnavContainer.html("some html");
    break;

  case 1:
    $subnavContainer.html("some more html");
    break;

  ...
}

Answer 2

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function (e) {
        if (e.target.id == 'firstElement')
        {
            $subnavContainer.html("some html");
        }
        else if (e.target.id == 'secondElement')
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });
});

Answer 3

如果你的 HTML 看起来像这样

<div id='firstElement' nave' class='navElements">Elem 1</div>
<div id='secondElement' class='navElements">Elem 2</div>
<div id='thirdElement' class='navElements">Elem 3</div>
<div id='fourthElement' class='navElements">Elem 4</div>

你可以简单地这样做

$(".navElements").click(function () {
   var $id = $(this).attr('id');
   if ($id == 'firstElement') {
     //code
   } elseif ($id == 'secondElement') {
     //code
   }
   //more code
});

Answer 4

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function (event) { <-- CHANGED
        var el = event.target;
        if (el.id == #firstElement)
        {
            $subnavContainer.html("some html");
        }
        else if (el.id == #secondElement)
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

这样您就可以访问 event.target

或者，使用 $(this) 来测试您单击的元素。这实际上取决于你从什么开始。

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () {
        if ($(this).attr('id') == #firstElement)
        {
            $subnavContainer.html("some html");
        }
        else if ($(this).attr('id') == #secondElement)
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").click(function () { 
        if ($(this).index() == 0)
        {
            $subnavContainer.html("some html");
        }
        else if ($(this).index() == 1) // zero based indexing
        {
            $subnavContainer.html("some other html");
        }
        $subnavContainer.show("slow");
    });

Answer 5

已经有一些很好的答案，但另一种方法是采用两种方法

$(function () {
    var $subnavContainer = $(".subwrapperBlue");
    $(".navElements").first().click(function () {
        $subnavContainer.html("some html");

        //This element is hidden onLoad using the $(document).ready object.
        $subnavContainer.show("slow");
    });

    $(".navElements").not(":first").click(function () {
        $subnavContainer.html("some other html");

        //This element is hidden onLoad using the $(document).ready object.
        $subnavContainer.show("slow");
    });
});