Question

我正在尝试更改链接的锚文本，并通过ID更改它的href，这是我的javascript：

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main></main>

<script id='template' type='text/ractive'>
    <div class='fileSystem'>
        <folder href='{{root.href}}' files='{{root.files}}'/>
    </div>
</script>

<script id='folder' type='text/ractive'>        
    <ul class='folder'>        
        <button on-click='toggle("show_files")'>+</button>
        {{#show_files}}
            {{#files}}
            <file href='{{href}}/{{filename}}'/>
            {{/files}}
        {{/show_files}}
    </ul>
</script>

<script id='file' type='text/ractive'>
    <li class='file'>
        <img class='icon-{{type}}'/>
        <span><a href="{{href}}">{{filename}}</a></span>
        
        <!-- if this is actually a folder, embed the folder partial -->
        {{# type === 'folder' }}
        <folder href='{{href}}' files='{{files}}'/>
        {{/ type === 'folder' }}
    </li>
</script>

我尝试过使用obj，但这也不行，这是我的href：

$('.like_status').click(function(event) { // bind function to submit event of form
    event.preventDefault();
    $.ajax({
        url: $(this).attr('href'),
        success: function(responseText) {
            $(this).attr("href", "<?php echo Config::get('URL'); ?>dashboard/unlike_status/" + $(this).attr('id'));
            alert($(this).attr('id'));
            $(this).text('Unlike');

        }
    });
});

Answer 1

由于范围和闭包，我建议在函数开头创建变量而不是依赖this：

// Using the more recent ON method instead of the
// "old-school" .click method
$('.like_status').on('click', function() {
    var $link = $(this);
    event.preventDefault();
    $.ajax({
        url: $link.attr('href'),
        success: function(responseText) {
            $link.attr("href", "<?php echo Config::get('URL'); ?>dashboard/unlike_status/" + $link.attr('id'));
            alert($link.attr('id'));
            $link.text('Unlike');

        }
    });
});

我在jQuery对象前加上$，虽然在这个例子中可以忽略不计，但是通过将变量设置为jQuery调用$(this)，我不必每次都在其他地方调用它。

我建议您阅读Explaining JavaScript scope and closures，其中包含您遇到此问题的基础。

Answer 2

您可以使用event.target

引用DOM元素

$('.like_status').click(function(event) { // bind function to submit event of form
    event.preventDefault();
    $.ajax({
        url: $(event.target).attr('href'),
        success: function(responseText) {
            $(event.target).attr("href", "<?php echo Config::get('URL'); ?>dashboard/unlike_status/" + $(event.target).attr('id'));
            alert($(event.target).attr('id'));
            $(event.target).text('Unlike');

        }
    });
});

Answer 3

正如评论者建议的那样，添加对ajax函数之外的元素的引用，然后使用该引用代替$(this)

$('.like_status').click(function(event) { // bind function to submit event of form
    event.preventDefault();
    var $link = $(this); //add a reference
    $.ajax({
        url: $link.attr('href'),
        success: function(responseText) {
            $link.attr("href", "<?php echo Config::get('URL'); ?>dashboard/unlike_status/" + $link.attr('id'));
            alert($link.attr('id'));
            $link.text('Unlike');

        }
    });
});

obj和$返回undefined

3 个答案: