Jquery DOM Манипуляции Somenthing лучше, чем это?

Question

Jquery DOM Манипуляции Somenthing лучше, чем это?

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>

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

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

Bera 14 нояб. 2013, в 13:56

Источник

0

Вы должны проверить angularJS, это действительно здорово для такого рода задач.
ETAN 14 нояб. 2013, в 13:02

Теги:

javascript

jquery

html5

2 ответа

1

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

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() кодом. Надеюсь, что вам нужно

Chris 14 нояб. 2013, в 09:57

Ещё вопросы

Вы должны проверить angularJS, это действительно здорово для такого рода задач.

OrfeasZ · Accepted Answer · 2013-11-14T11-27-00.000Z

Вы можете добавить атрибут data-id в свои 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;
        ...
    }
});