jquery - 动态菜单项(单击时更改文本)

Question

我需要菜单方面的帮助。请参阅以下菜单:

menu

此菜单的代码:

    <div id="menu">
  <ul>
   <li class="home"><a href="#home" class="panel">home / <span class="go">you are here</span></a></li>
   <li class="about"><a href="#about" class="panel">about / <span class="go">go here</span></a></li>
   <li class="cases"><a href="#cases" class="panel">cases / <span class="go">go there</span></a></li>
   <li class="photos"><a href="#photos" class="panel">photos / <span class="go">maybe here</span></a></li>
   <li class="contact"><a href="#contact" class="panel">contact / <span class="go">or even here<span></span></a></li>
  </ul>
 </div>

我想要做什么:单击菜单项: 1.将红色文字改为黄色“你在这里” 2. 将上一个菜单项更改回其原始状态(例如红色和“转到此处”)。

“去这里”、“去那里”、“也许在这里”、“甚至在这里”这 4 个值是应该分配给其他菜单项的 4 个值(如示例)。

这是我已有的代码:

$('#menu ul li.home').addClass('active')
$('#menu ul li.active a .go').html("you are here");

$("#menu ul li").click(function () { 
$('#menu ul li.active').removeClass('active');
     $(this).addClass('active');
     $('#menu ul li.active a .go').html("you are here");
  });

  var arr = [ "go here", "go there", "maybe here", "or even here" ];
  var obj = { item1: "go here", item2: "go there" ,item3: "maybe here", item4: "or even here"};

  $('#menu ul li').click(function () {
   var str = $('#menu ul li.active a .go').text();
   $('#menu ul li.active a .go').html(str);
  });

如您所见，它是不完整的。我不知道如何从数组中获取值并将它们分配给菜单项。替换文本有效，但无法更改回原始状态。另外，现在，由于某种原因，我无法单击列表项本身来激活 jquery 代码。我只需点击它下面的几个像素。但我猜这是一个 CSS 问题。

如果有人能提供帮助，我将非常感激!

问候，

马蒂斯

Answer 1

这应该有效:

var msgs = [ "go here", "go there", "maybe here", "or even here" ];
var msgs_length = msgs.length;

$("#menu ul li").click(function () { 
     $('#menu ul li.active').removeClass('active');
     $(this).addClass('active');
     $('.go', this).text("you are here");

     $("#menu ul li").not(this).each(function(i) {
         $('.go', this).text(msgs[i % msgs_length]);
     });
});

说明:

• 如果您只想设置文本，请使用 text() 而不是 .html()
• $('.go', this) 将查找当前元素内具有类 go 的任何元素(了解有关 selector context 的更多信息)
• $("#menu ul li").not(this) 选择除当前元素之外的所有 li 元素(了解有关 .not() 的更多信息)
• i 是所选元素列表中元素的索引(了解有关 .each() 的更多信息)
• i % msgs_length(模)确保您始终拥有消息数组的有效索引(以防菜单项多于消息)

<小时/>

我不知道颜色是否已经起作用，但这只是一个 CSS 问题:

#menu ul li .go {
    color: #FF0;
}

#menu ul li.active .go {
    color: #F00;
}

<小时/>

更新:

顺便说一句，而不是“手动”设置 home 列表条目的值:

$('#menu ul li.home').addClass('active');
$('#menu ul li.active a .go').html("you are here");

考虑模拟点击，以便正确设置其他列表元素的值:

$('#menu li.home').click();

<小时/>

更新2:

解决“必须点击下方”问题;)

$("#menu ul li a").click(function () { 
     $('#menu ul li.active').removeClass('active');
     $(this).parent().addClass('active');
     $('.go', this).text("you are here");

     $("#menu ul li a").not(this).each(function(i) {
         $('.go', this).text(msgs[i % msgs_length]);
     });
});