JQuery DOM Manipulation Сознание лучше, чем это?

Question

Я пытаюсь найти лучший подход, чтобы улучшить код ниже с более элегантным использованием селекторов 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> 

Как это лучший подход, шаблонный движок или стратегии для решения этой проблемы без сосать.

Мне нужны некоторые эффективные примеры кода, пожалуйста и спасибо.

Answer 1

Вы можете добавить атрибут данных идентификатор вашего HTML элементов следующим образом:

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

, а затем в коде JavaScript, сделать что-то подобное тому, что рекомендовал Крис, такие как:

$('.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; 
     ... 
    } 
}); 

Answer 2

просто использовать переключатель()

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

просто заменить предупреждение() с кодом. Надеюсь, это то, что вам нужно