获取此元素的属性并将其用于其他元素

Question

所以...我想要的是以下内容：

当我单击一个 id 以“menu”开头的元素时，它会将其 attr value =“value”放入变量中，并在下一个函数中使用它。

这是来源：

index.html

<div id='menuBar' >
  <img id='menu01' src='/si/img/menu.apresentacao.jpg' value='apresentacao' >
  <img id='menu02' src='/si/img/menu.servicos.jpg' value='servicos' >
</div>

jquery.js

$(document).ready(function() {

 $('img[id^='menu']').click( function(){

  var menuValue = $(this).attr('value');

  $('div#contentBox').fadeOut(300, function() {
   $('div#contentBox').replaceWith('<div id="contentBox">' + menuValue + '</div>');
  });
 });

});

variables.js

var servicos = "<p id='title'>Serviços</p><br><p id='text'>text text</p><br>";

提前致谢*

Answer 1

您的代码的唯一问题是您的选择器格式错误，因此不起作用：

$('img[id^='menu']').click( function(){
  ^        ^    ^ ^
  |        |    | |
  |        |    | \__ Closing single quote
  |        |    |
  |        |    \__ Opening single quote
  |        |
  |        |
  |        \__ Closing single quote
  |
  \__ Opening single quote


  ====> does not compute!

它应该是什么，是这样的（注意“menu:)周围的双引号：

$('img[id^="menu"]').click( function(){
           ^    ^
           |    |
           \    /
            \  /
             \/
              \_Double quotes, yay!

...并且它工作得很好： http://jsfiddle.net/HnsTu/

Answer 2

使用以图像值作为键的对象，而不是使用 var servicos。

var menuValueContent = {'servicos': '<p>....</p>', 'apre': '...'}; 

在您的点击处理程序中，您可以使用 menuValueContent[menuValue] 来获取新内容。