Функция переменной переменной JavaScript, не сохраняющая значение

Question

У меня проблема с приведенным ниже кодом. Я использую атрибут onclick для вызова функции ниже, а затем проверку того, какой тип данных передается. затем назначая его локальной переменной вне функции. но некоторые, как он сохраняет 1 attr и отображает его в режиме предупреждения, а другой показывает как неопределенный, а затем, когда я нажимаю на другой attr, он показывает это, и для первого говорит undefined. мои js и HTML ниже.

JQuery код:

<script> 
var attr1 = null; 
var attr2 = null; 


function createLink(sportAttr) { 

    if($(sportAttr).attr("data-provider-sport-id") != typeof undefined && $(sportAttr).attr("data-provider-sport-id") !== false) { 

     attr2 = $(sportAttr).attr("data-provider-sport-id"); 

     //alert(attr2); 
    } 

    if($(sportAttr).attr("data-main-sport-id") != typeof undefined && $(sportAttr).attr("data-main-sport-id") !== false) { 
     attr1 = $(sportAttr).attr("data-main-sport-id"); 
     //alert(attr1); 
    } 

    alert(attr1 + " and second attr is " + attr2); 
    //it never reaches the next line because for some reason one of the attrs is always null 
    if(attr1 != null && attr2 != null) { 

     if(confirm("Are you sure you want to create this link")) { 

     } 

    } 

} 
</script> 

HTML код:

<i data-provider-sport-id="9" onclick="createLink(this)">Music</i> 

<b data-main-sport-id="17" onclick="createLink(this)">Music</b> 

, когда я нажимаю на первой она отображает "неопределенный и второй атр 9".

, когда я нажимаю на второй он отображает «17 и второй атр не определен»

любые улики?

Answer 1

Эта проверка неправилен:

$(sportAttr).attr("data-main-sport-id") != typeof undefined 

See, typeof undefined всегда строка'undefined' (как TypeOf всегда возвращает строку). Этот оператор будет истинным, если атрибут data не будет таким же - например, строка 'undefined'.

Таким образом, ваша проблема не в сохранении, а в том, что вы перезаписываете значения из-за неправильно настроенных операторов if.

Чтобы исправить это, используйте эту неопределенную проверку (который вы, вероятно, пытались в первую очередь):

typeof $(sportAttr).attr("data-main-sport-id") !== 'undefined' 

Или просто использовать простое сравнение с неопределенным, без typeof(но это менее надежный, так что ваша интуиция использовать TypeOf не плохо, сам по себе):.

$(sportAttr).attr("data-main-sport-id") !== undefined 

Answer 2

Удалить typeof оператора, typeof undefined является "undefined".

Answer 3

Вместо проверки, если атрибут не определен и значение не является ложным, вы можете проверить только Truthy значения, как показано ниже -

var attr1 = null; 
 
var attr2 = null; 
 

 

 
function createLink(sportAttr) { 
 

 
    if($(sportAttr).attr("data-provider-sport-id")) { 
 

 
     attr2 = $(sportAttr).attr("data-provider-sport-id"); 
 

 
     //alert(attr2); 
 
    } 
 

 
    if($(sportAttr).attr("data-main-sport-id")) { 
 
     attr1 = $(sportAttr).attr("data-main-sport-id"); 
 
     //alert(attr1); 
 
    } 
 

 
    alert(attr1 + " and second attr is " + attr2); 
 
    //it never reaches the next line because for some reason one of the attrs is always null 
 
    if(attr1 != null && attr2 != null) { 
 

 
     if(confirm("Are you sure you want to create this link")) { 
 

 
     } 
 

 
    } 
 

 
}

Надеется, что это помогает!

Answer 4

Сначала я рекомендую вам не устанавливать onclick на свой html, это не очень хорошая практика.Кроме того, я улучшил свой код, посмотрите ниже:

JS:

$(document).ready(function(){ 
    $('.myAction').on('click', function(){ 
     createLink($(this).data('id')) 
    }); 

}); 

function createLink(sportAttr) { 
    if(typeof sportAttr !== 'undefined') { 
     alert(sportAttr); 
    } 

} 

HTML:

<i class="myAction" data-id="9" data-provider-sport-id="9">Music</i> 

<b class="myAction" data-id="17" data-main-sport-id="17">Music</b> 

В принципе идея сделать обобщенную функцию и попытаться сократить код и сделать он более чистый, также вы не правильно проверяли undefined.

if(typeof sportAttr !== 'undefined') { 
     alert(sportAttr); 
    } 

DEMO

Я надеюсь, что это помогает.