Событие не добавляется в цикл for

Question

Это HTML. Если щелкнуть ссылку, я хочу заменить элемент span перед ним текстом.

<p><span id="sp1">that1</span> <a href="#" id="update1">Update1</a></p>
<p><span id="sp2">that2</span> <a href="#" id="update2">Update2</a></p>
<p><span id="sp3">that3</span> <a href="#" id="update3">Update3</a></p>
<p><span id="sp4">that4</span> <a href="#" id="update4">Update4</a></p>
<p><span id="sp5">that5</span> <a href="#" id="update5">Update5</a></p>

Как видите, моя идея состояла в том, чтобы дать пролетам в якорях идентичные идентификаторы и номера.

В моем jquery-коде я перебираю все якорные элементы, даю им событие click, которое вызывает замену элемента span перед ним.

<script type="text/javascript" >

  $(document).ready(function() {
   var numSpans = $("span").length;
   for (n=0;n<=numSpans;n++) {
     $("a#update" + n).click(function(e){
       $('span#sp' + n).replaceWith('this');
       e.preventDefault();
     });    
   }   
  });

</script>

По какой-то причине это не работает.

Что я делаю не так?

Answer 1

Проблема с вашим исходным кодом заключается в том, что вы создаете замыкание для переменной n.Когда вызывается обработчик события, он вызывается со значением n в точке вызова, а не в точке объявления.Вы можете увидеть это, добавив предупреждение:

$(document).ready(function() {
    var numSpans = $("span").length;
    for (n = 1; n <= numSpans; n++) {
        $("a#update" + n).click(function(e) {
            alert(n); //Alerts '6'
            $('span#sp' + n).replaceWith('this');
            e.preventDefault();
        });
    }
})

Один из способов исправить это - создать замыкание на значение n в каждой итерации, например:

$(document).ready(function() {
    var numSpans = $("span").length;
    for (n = 1; n <= numSpans; n++) {
        $("a#update" + n).click(
            (function(k) {
                return function(e) {
                    alert(k);
                    $('span#sp' + k).replaceWith('this');
                    e.preventDefault();
                }
            })(n)
        );
    }
})

Тем не менее, это грязно, и вам лучше использовать более jQuery-y метод.

---

Один из способов сделать это - удалить id s из вашего кода.Если они вам не нужны для чего-то другого, они не требуются:

<p><span>that1</span> <a href="#" class="update">Update1</a></p>
<p><span>that2</span> <a href="#" class="update">Update2</a></p>
<p><span>that3</span> <a href="#" class="update">Update3</a></p>
<p><span>that4</span> <a href="#" class="update">Update4</a></p>
<p><span>that5</span> <a href="#" class="update">Update5</a></p>

jQuery:

$(function() {
    $('a.update').live('click', function() {
        $(this).siblings('span').replaceWith("Updated that!");
    });
});

jsFiddle

Answer 2

Не создавайте функции в цикле.С jQuery вообще нет необходимости в явном цикле.

$(function()
{
    $('span[id^=sp]').each(function(n)
    {
        $('#update' + n).click(function(e)
        {
            $('#sp' + n).replaceWith(this);
            return false;
        });
    });
});

Демо: http://jsfiddle.net/mattball/4TVMa/

---

Вы можете сделать способ лучше, чем этот,хотя:

$(function()
{
    $('p > a[id^=update]').live('click', function(e)
    {
        $(this).prev().replaceWith(this);
        return false;
    });
});

Демо: http://jsfiddle.net/mattball/xySGW/

Answer 3

Попробуйте это:

$(function(){
    $("a[id^='update']").click(function(){
        var index = this.id.replace(/[^0-9]/g, "");
        $("span#sp" + index).replaceWith(this);
        e.preventDefault();
    });
});