2013-03-28 4 views
3

У меня есть функция jQuery, которая выполняется двумя разными кнопками.inline if else statements в jQuery

$("#btnSearch, #btnDirectorSearch").click(function() { 

Часть html, которую эта функция строит, зависит от того, какая кнопка была удалена. Я использую данных- атрибуты для хранения моих переменных, как это:

var div = $(this).data("str"); 

И HTML строки Я здание зависит от того, какого значения переменных «ДИВ» есть. Есть ли способ сделать inline if/else в jQuery?

if div = "choice1" { 
    html += '<tr data-str = "str1" data-dataItem = "dataItem1" data-result-title = "' + name + '" data-result-id="' + sel + '">'; 

} else { 
    html += '<tr data-str = "str2" data-dataItem = "dataItem2" data-result-title = "' + name + '" data-result-id="' + sel + '">'; 
} 

Это кажется громоздким, и я надеюсь, что есть лучший JQuery способ сделать это.

Спасибо!

+0

yes javascript ... sorry Мне просто интересно, есть ли лучший способ сделать это, используя библиотеку jQuery. – SkyeBoniwell

ответ

12

у вас есть ошибка синтаксиса

if div = "choice1" 

должен быть

if (div == "choice1") 

Во всяком случае, шаблон, который вы ищете,:

div == "choice1" ? <code for true> : <code for false> 
+0

oops thanks for catching that! – SkyeBoniwell

3

вы можете использовать condition ? code when true: code when false

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

if(div==="choice1"){ 

} 
else{ 
} 

использования ===

+0

Не знаю - я думаю, что в линию лучше на глаза, и для назначения значений гораздо быстрее читать и понимать. Кажется мне более интуитивным. –

2

Поскольку это только число, которое изменяется на выходе, вы можете сделать это:

var num = div == "choice1" ? 1 : 2; 
html += '<tr data-str="str'+num+'" data-dataItem="dataItem'+num+'" data-result-title="'+name+'" data-result-id="' + sel + '">'; 
0

Если ваш выбор ограничен , вы можете добавить небольшой массив поиска:

var choices = { 
    choice1: { 
     str: "str1", 
     data: "dataItem1" 
    }, 
    choice2: { ... } 
}; 

html += '<tr data-str="' + choices[div].str 
    + '" data-dataItem="' + choices[div].data 
    + '" data-result-title="' + name + ... etc;