0

我试图找出一种更好的方法来改进下面的代码，更优雅地使用 jquery 选择器。

我的问题是我有不同的用户消息要在我的应用程序的许多页面的特定 div 中为用户显示，我正在选择所需的选择器，他们根据某些值的值更改所需元素中的消息如下图所示：

/*Javascript*/ 

if (var == value) {
            msg = "Msg 1 <br>";
            msg = msg + "msg 1 continue... &nbsp;<br>"
} else if (var == value2) {
            msg = "Msg 2 <br>";
            msg = msg + "msg 1 continue... &nbsp;<br>"
}


if(msg != "") {
   document.getElementById('IdSelector').style.display = 'block';
   document.getElementById('IdSelector').innerHTML=msg;
}

我的 html5 如下所示：

<div> id="IdSelector" class="classMsg">&nbsp;</div>

更好的方法、模板引擎或策略如何处理这个问题而不会很糟糕。

我需要一些有效的代码示例，非常感谢。

4

2 回答 2

2

您可以向 html 元素添加 data-id 属性，如下所示：

<div data-id="1" class="classMsg">&nbsp;</div>

然后在您的 JavaScript 代码中，执行类似于 Chris 建议的操作，例如：

$('.classMsg').each(function(_, element) 
{
    var dataID = $(element).attr('data-id');

    switch(dataID)
    {
        case 1:
            element.css('display', 'block').html('Message 1');
            break;
        case 2:
            element.css('display', 'block').html('Message 2');
            break;
        ...
    }
});
于 2013-11-14T12:37:14.693 回答
1

只需使用 switch()

switch(var){
  case 1:
    alert("My value is 1");
    break;
  case "error":
    alert("My value is (string) error");
    break;
  default:
    alert("default value");
   break;
}

只需将 alert() 替换为您的代码即可。希望这是你需要的

于 2013-11-14T12:09:29.030 回答