Получить атрибут этого элемента и использовать его для другого элемента - PullRequest
Новая
       4

Получить атрибут этого элемента и использовать его для другого элемента

3 голосов
/ 30 сентября 2011

Итак ... Что я хочу, это следующее:

Когда я щелкаю элемент с идентификатором, начинающимся с '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>";

Заранее спасибо *

Ответы [ 2 ]

0 голосов
/ 30 сентября 2011

Вместо использования var servicos используйте объект со значением вашего изображения в качестве ключа. 

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

и в вашем обработчике кликов вы можете использовать menuValueContent[menuValue] для получения нового содержимого.

0 голосов
/ 30 сентября 2011

Единственная проблема с вашим кодом состоит в том, что ваш селектор искажен и поэтому не работает: 

$('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/

...