2010-06-09 3 views
0

У меня есть кнопка «next», которая исчезает из div, показывает другую, меняет графику, а затем ... Я хочу, чтобы она меняла фактический идентификатор «следующей» кнопки, но ни .html ни replaceWith, похоже, работают.динамически меняет текст селектора

У меня есть это:

$(document).ready(function(){ 
$('#portfolio').fadeTo(500,0.25); 
    $('#account') 
    .animate({width:"10.1875em",height:"11.1875em",duration:'medium'}); 

    $('#next2_btn').click(function(){ 
    $('#content').fadeTo(300, 0.0, function() { 
    $('#content2').show(300, function() { 
    $('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">') 

    $('#account').fadeTo(500,1.0) 
    .animate({marginLeft:"220px", width:"2em",'height' :"2em",duration:'medium'}) 
    .animate({ 
        marginLeft:"400px", 
        marginTop:"35px", 
        width:"7em", 
        height:"7em", 
     duration:"medium" 
        }, 'medium', 'linear', function() { 
        $('#statusGraphic').replaceWith('<img src="state2_138x28.gif">'); 
        }) 
    .fadeTo(500,0.5); 

    $('#portfolio') 
    .fadeTo(500,1.5) 
    .animate({marginLeft:"-175px", width:"2em",height:"2.5em",duration:'medium'}) 
    .animate({marginLeft:"-330px", width:"8.5em",height:"9.9375em",duration:'medium'}); 
    }); 
     }) 
    }) 

ответ

0

Эта часть нечетное:

$('#next2_btn'.value) 

Проблема, скорее всего там ...

+0

Возможно @Kelly происходит от PHP, где '.' ставит две строки вместе, в этом случае заменить это с '+', и вы, возможно, взломали дело! – gnarf

0

Я не уверен, я понимаю полную механику того, что вы хотите выполнить, но это недействительно:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">') 

Это спросит jQuery, чтобы сначала найти элемент # next2_btn (т. Е. $('#next2_btn')) и затем попытаться вызвать функцию .$() на результат. Эта функция не существует.

Кроме того, выражение '#next2_btn'.value пытается получить доступ к свойству .value строки '#next2_btn', которая также не существует.

Итак, у нас есть две ошибки, плавающие вокруг этого среднего бита, каждый из которых будет достаточным, чтобы сорвать весь оператор.

Возможно, вы имели в виду:

$('#next2_btn').html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">'); 

Это просто находит #next2_btn и устанавливает HTML внутри, чтобы быть, что <area> тег. Это справедливо только в том случае, если #next2_btn является элементом , кроме a input. Если это input, вы не можете изменить его HTML; вы можете изменить его значение только с помощью метода .val('...'). (Или заменить его полностью с помощью метода .replaceWith().)

+0

Вероятно, второй пример будет правильным, если вы использовали 'replaceWith()' вместо 'html()'. @Kelly также упомянул пробовать эту функцию ... Вы должны еще раз подчеркнуть недействительность '$ ('# next2_btn'). $ (...)' - Вероятно, это вызовет '$ ('# next2_btn'). $ 'не является функцией ошибки ... – gnarf

1

Я предполагаю, что это линия (которая является недействительным), который должен изменить идентификатор:

$('#next2_btn').$('#next2_btn'.value).html('<area shape="rect" coords="826,935,906,971" id="next3_btn" href="#">') 

Вот рабочий пример изменения id атрибута области внутри проверенной карты и подтвержденной работы в Firefox, Chrome и IE8 (вам нужно будет скопировать изображение 1.jpg в местоположение файла .html, содержащего этот код, чтобы увидеть его работу):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 
    <script src="jquery-1.4.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#next2_btn').click(function() { 
       // find current element 
       var element = $(this); 

       // get id 
       var id = element.attr('id'); 

       // find the number portion of the id using regular expressions 
       var findNumberRegex = /next(\d+)_btn/; 
       var idNumber = parseInt(id.replace(findNumberRegex, "$1")); 

       // increment the number 
       idNumber++; 

       // re-assign the area id 
       element.attr('id', 'next' + idNumber + '_btn'); 
      }); 

      $('#showAreaId').click(function() { 
       alert('current id of area is ' + $('map[name="Map"]').find('area').attr('id')); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <img src="1.jpg" usemap="#Map" width="300" height="300" /> 
    <map name="Map"> 
     <area shape="rect" coords="0,0,300,300" id="next2_btn" alt="next2_btn" href="#" /> 
    </map> 
    <button id="showAreaId">Show current ID of area</button> 
</body> 
</html> 

На боковой ноте строка ниже может не делать именно то, что вы хотите - как только это запустится, #statusGraphic больше не будет существовать.

$('#statusGraphic').replaceWith('<img src="state2_138x28.gif">'); 

Я не уверен, какой тип элемента #statusGraphic, но если это уже образ, вы могли бы сделать:

$('#statusGraphic').attr('src', 'state2_138x28.gif'); 

Если это уже не образ, возможно, добавить изображение вместо:

$('#statusGraphic').append('<img src="state2_138x28.gif" />'); 

который может быть позже удалены:

$('#statusGraphic').empty(); 
0

Извините, я опубликовал некоторый «тестовый» код ... этой строки нет.

Я хочу изменить идентификатор ссылки, чтобы снова использовать эту ссылку, загружать только что-то другое. Так что мой HTML является:

<map name="Map"> 
<area shape="rect" coords="826,935,906,971" id="next2_btn" href="#"> 
</map> 

и после того, как они нажимают на это, предыдущий код работает угасать существующий DIV, показать скрытые один, и инициировать определенную анимацию на три графика. Итак, после этого я хочу, чтобы идентификатор менялся, чтобы я мог писать новые анимации и заменять графику одной и той же ссылкой. Это все, чтобы избежать обновления.

Итак, я просто пытаюсь проверить, можно ли изменить исходный идентификатор по ссылке. Сначала я попытался выбрать div и переписать весь html, который вы видите выше. Затем я попытался выбрать идентификатор и использовать атрибут, как было предложено выше, но ничего не сработало.

Благодаря

+0

Я сделал вам рабочий образец (в моем ответе выше) об изменении идентификатора тега области - проверьте его. Изменение идентификатора с использованием .attr() определенно работает, но не уверен, что вас подвешивает. Надеюсь, пример поможет. –

+0

Спасибо Нейту, это действительно помогло мне! –

0

Идентификатор делает изменения, это просто, что код уже присвоен элементу независимо от его будущей стоимости ид ..

вы должны использовать живой способ связать событие щелчка ..

$('#next2_btn').live('click', function(){ 
      ../*code for the button with id next2_btn which will change the id of the clicked element to anotherID*/... 
      // at some point run the following command 
      $(this).attr('id','anotherID'); 
}); 
$('#anotherID').live('click', function(){../*code that will run from elements that have #anotherID no matter when they get this id*/...}); 

проверка живой пример здесь: http://www.jsfiddle.net/6mFht/

Смежные вопросы