Question

我在尝试拆分类属性

时遇到问题

     <div  class='message_holder  user1212 chatid142'></div>

所以从我的功能我想获得用户ID（1212）和chatid（142）

但是我的错误就是我的错误我怎么能解决这个问题。

 function user_chat_id(){
     classList = $(this).attr("class").split(/\s+/); //----here im getting the error
     $.each(classList, function(index, item) {
        if (item.indexOf("user") > -1) {this_id = item;}
        if (item.indexOf("chatid") > -1) {this_chat_id = item;}
     });
   this_id = this_id.replace('user', '');
   this_chat_id = this_chat_id.replace('chatid', '');
   return [this_id,this_chat_id];
   }

编辑：

当我称之为

  $(document).on ("mouseenter", ".message_holder", function () {
    var this_id = user_chat_id();
     alert(this_id);
   })

Answer 1

为什么您的代码无效。

$(this)将成为当前窗口。其中.attr("class")将是undefined。因此，当您尝试split时，它会抛出错误。

显示$(this)的演示将是当前窗口。

$(document).ready(function(){
    $("p").click(function(){
        a()
    });
});
function a(){
  console.log($(this))
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on this paragraph.</p>

<强> Soluton

将当前元素作为参数传递给函数。

要做出的改变

var this_id = user_chat_id($(this)); //While calling.

function user_chat_id(elem){ // in function definition

您应该使用elem代替$(this)

演示如何用它传递元素

$(document).ready(function(){
    $("p").click(function(){
        a($(this))
    });
});
function a(elem){
  console.log(elem)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click on this paragraph.</p>

Answer 2

当前代码的问题是函数中this的值为undefined（如果处于严格模式）或设置为全局上下文（如果不是严格模式），因为它只是一个常规的函数调用。因此，$(this).attr("class")只会返回undefined，然后当您尝试对其进行.split()时，您会收到错误。

我建议使用正则表达式为您提供更清晰的实现：

function getId(str, key) {
    var regex = new RegExp("\\b" + key + "(\\d+)\\b");
    var match = str.match(regex);
    return match ? match[1] : null;
}

function user_chat_id(obj){
    var classList = obj.className;
    var userId = getId(classList, "user");
    var chatId = getId(classList, "chatid");
    return [userId, chatId];
}

$(document).on ("mouseenter", ".message_holder", function () {
    var this_id = user_chat_id(this);
    alert(this_id);
});

此外，您显示的HTML：

<div  class='message_holder  user1212 chatid142></div>

缺少class属性的结束引号。它应该是：

<div class='message_holder user1212 chatid142'></div>

工作演示：

function getId(str, key) {
    var regex = new RegExp("\\b" + key + "(\\d+)\\b");
    var match = str.match(regex);
    return match ? match[1] : null;
}

function user_chat_id(obj){
    var classList = obj.className;
    var userId = getId(classList, "user");
    var chatId = getId(classList, "chatid");
    return [userId, chatId];
}

$(document).on ("mouseenter", ".message_holder", function () {
    var this_id = user_chat_id(this);
    alert(this_id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div  class='message_holder  user1212 chatid142'>Put the mouse over this text</div>

无法阅读财产＆＃39;拆分＆＃39;未定义的

2 个答案: