JQuery的$(this)在if之后会变化

原创于 2024-01-22 16:47:38 发布 · 539 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #javascript

文章讲述了在JavaScript中，当处理下拉框变化事件时，由于`this`对象在循环内的引用问题导致链接字符串长度增加。通过正确使用`var`关键字保存原始`this`并进行字符串拼接修复了这个问题。

$("[name='cmbTargetAssLangs']").on('change', function () {
       var val = $(this).find("option:selected").val();
       $("#hdTargetAssLangId").val(val);
       var children = $(this).parent().next().children();
       $.each(children,function(i,item){
           if($(this).attr('href').indexOf('Translation')>0){
            var orgin = $(this).attr('href');
            orgin = orgin.toString()+'/'+val.toString();
            $(this).attr('href',orgin);
           }
       });
    });

在这里插入图片描述
此时用浏览器调试发现，每选择一次下拉框就会导致链接字符串变长

这是因为在Javascript中的 $(t hi s) 调用不正确。在进入 ‘ i f ‘ 字句后， ‘$ (this)已经不是以前的那个$(this)`了。修改代码如下。

$("[name='cmbTargetAssLangs']").on('change', function () {
       var val = $(this).find("option:selected").val();
       $("#hdTargetAssLangId").val(val);
       var children = $(this).parent().next().children();
       $.each(children,function(i,item){
                var link = $(this).attr('href');
                var index = link.indexOf('Translation')
                if (index > 0) {
                    var endIndex = link.lastIndexOf('/');
                    link = link.substring(0, endIndex);
                    link = link + '/' + val.toString();
                    $(this).attr('href', link);
					console.log($(this).attr('href', link));
       });
    });