Question

我已将onlick事件附加到函数中。我想引用从函数内部单击的元素，以便我可以更改其内部HTML，但为什么它不起作用？有没有其他方法可以引用点击的元素？

HTML

        <div class="save_button" onclick="toggle_save_star(<?php echo $listing->listing_id ?>,'<?php echo base_url()?>')">
            <?php if($listing->saved_element_id):?>
            <img src="<?php echo site_url('images/core/icons/basic2/star1_16.png')?>" />
            <?php else:?>
            <img src="<?php echo site_url('images/core/icons/basic2/star1_16_gray.png')?>" />
            <?php endif; ?>
        </div>

Javascript功能

function toggle_save_star(element_id, site_url) {
    var url = site_url+"AJAX/ajax_default/modify_saved";
    var button = $(this);
    $.post(url,{action: 'toggle', element_id: element_id, type: 'listing' }, function(data) {
        if(data == 'saved') {
            $(button).html('<img src="'+site_url+'images/core/icons/basic2/star1_16.png" />');
        }
        else{
            $(button).html('<img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" />');
        }
    });
}

Answer 1

我认为在这种情况下“这个”不参考div。你应该试试：

$('.save_button').click(function(){
  $(this)...
});

Answer 2

请尝试使用$("#"+element_id)。 $(this)无效，因为您没有将此函数作为对象上的方法运行。

改进其他答案，试试这个：

$(".save_button").click(function(){
toggle_save_star(element_id, site_url, $(this));
});

在你的函数中，第三个新参数（称为“target”，假设）可以像这样使用：

var button = target;

然后使用button.html(...);

之类的按钮

Answer 3

这里的主要问题是当您在标记中为字符串分配字符串时，如：

<div class="save_button" onclick="toggle_save_star..."

然后，引号中的代码由eval（）计算，this指针将设置为指向window对象，而不是生成点击的对象。如果你想要this设置得恰当，那么就不能在标记中分配onclick处理程序，你需要用JS来完成它，如下所示：

$(".save_button").click();

或代码中的其他方式。

此外，toggle_save_star函数中存在编码错误。

您的button变量已经是一个jQuery对象，因此您无需尝试使用$(button)将其变为另一个变量。如果您打算使用该功能，则必须将其更改为：

function toggle_save_star(element_id, site_url) {
    var url = site_url+"AJAX/ajax_default/modify_saved";
    var button = $(this);
    $.post(url,{action: 'toggle', element_id: element_id, type: 'listing' }, function(data) {
        if(data == 'saved') {
            button.html('<img src="'+site_url+'images/core/icons/basic2/star1_16.png" />');
        }
        else{
            button.html('<img src="'+site_url+'images/core/icons/basic2/star1_16_gray.png" />');
        }
    });
}

Answer 4

你最好从你的div中删除onclick并使用以下内容：

http://jsfiddle.net/cpeele00/epD3v/

这允许您访问可点击的项目，在本例中为“save_button”。

然后，在页面底部（在到达结束体标记之前，在那里插入脚本）。

<script>

  $(document).ready(function(){

  //CALL THE FUNCTION HERE           


  //DEFINE THE FUNCTION HERE (see the jsFiddle link above)

  });

</script>
</body>

为什么$（this）不能在javascript函数中运行？

4 个答案: