динамическое изменение текста селектора - PullRequest
Новая
       7

динамическое изменение текста селектора

0 голосов
/ 09 июня 2010

У меня есть кнопка «Далее», которая затемняет 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'});
    });
        })
    })

Ответы [ 5 ]

1 голос
/ 09 июня 2010

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

$('#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 голосов
/ 10 июня 2010

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

Вы должны использовать метод live для привязки события click. 

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

0 голосов
/ 09 июня 2010

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

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

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

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

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

Спасибо

0 голосов
/ 09 июня 2010

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

$('#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 является элементом , отличным от и input.Если это input, вы не можете изменить его HTML;Вы можете изменить его значение только с помощью метода .val('...').(Или полностью замените его методом .replaceWith().)

0 голосов
/ 09 июня 2010

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

$('#next2_btn'.value)

Проблема, вероятно, там ...

...