如何在点击

Question

如果在“ i”标记的类上单击以下任何链接，则整个“ span”标记将被记录到控制台，包括整个“ a”本身。

我的问题是每次我单击下面的任何链接时，有时记录到控制台的信息是“未定义的”，因为该链接不存在。

如何获取每次单击始终记录正确信息的信息。（因此应记录“”标签，“”标签的类和“”标签

<div id="postbox-mood" class="ps-dropdown__menu ps-dropdown__menu--moods ps-js-postbox-mood" style="display:none">
  <a class="mood-list" id="postbox-mood-1" href="javascript:" data-option-value="1" data-option-display-value="joyful">
    <i class="ps-emoticon ps-emo-1"></i><span>joyful</span>
  </a>
  <a class="mood-list" id="postbox-mood-2" href="javascript:" data-option-value="2" data-option-display-value="meh">
    <i class="ps-emoticon ps-emo-2"></i><span>meh</span>
  </a>
  <a class="mood-list" id="postbox-mood-3" href="javascript:" data-option-value="3" data-option-display-value="love">
    <i class="ps-emoticon ps-emo-3"></i><span>love</span>
  </a>
  <a class="mood-list" id="postbox-mood-4" href="javascript:" data-option-value="4" data-option-display-value="flattered">
    <i class="ps-emoticon ps-emo-4"></i><span>flattered</span>
  </a>
  <a class="mood-list" id="postbox-mood-5" href="javascript:" data-option-value="5" data-option-display-value="crazy">
    <i class="ps-emoticon ps-emo-5"></i><span>crazy</span>
  </a>
  <a class="mood-list" id="postbox-mood-6" href="javascript:" data-option-value="6" data-option-display-value="cool">
    <i class="ps-emoticon ps-emo-6"></i><span>cool</span>
  </a>
  <a class="mood-list" id="postbox-mood-7" href="javascript:" data-option-value="7" data-option-display-value="tired">
    <i class="ps-emoticon ps-emo-7"></i><span>tired</span>
  </a>
  <a class="mood-list" id="postbox-mood-8" href="javascript:" data-option-value="8" data-option-display-value="confused">
    <i class="ps-emoticon ps-emo-8"></i><span>confused</span>
  </a>
  <a class="mood-list" id="postbox-mood-9" href="javascript:" data-option-value="9" data-option-display-value="speechless">
    <i class="ps-emoticon ps-emo-9"></i><span>speechless</span>
  </a>
  <a class="mood-list" id="postbox-mood-10" href="javascript:" data-option-value="10" data-option-display-value="confident">
    <i class="ps-emoticon ps-emo-10"></i><span>confident</span>
  </a>
  <a class="mood-list" id="postbox-mood-11" href="javascript:" data-option-value="11" data-option-display-value="relaxed">
    <i class="ps-emoticon ps-emo-11"></i><span>relaxed</span>
  </a>
  <a class="mood-list" id="postbox-mood-12" href="javascript:" data-option-value="12" data-option-display-value="strong">
    <i class="ps-emoticon ps-emo-12"></i><span>strong</span>
  </a>
  <a class="mood-list" id="postbox-mood-13" href="javascript:" data-option-value="13" data-option-display-value="happy">
    <i class="ps-emoticon ps-emo-13"></i><span>happy</span>
  </a>
  <a class="mood-list" id="postbox-mood-14" href="javascript:" data-option-value="14" data-option-display-value="angry">
    <i class="ps-emoticon ps-emo-14"></i><span>angry</span>
  </a>
  <a class="mood-list" id="postbox-mood-15" href="javascript:" data-option-value="15" data-option-display-value="scared">
    <i class="ps-emoticon ps-emo-15"></i><span>scared</span>
  </a>
  <a class="mood-list" id="postbox-mood-16" href="javascript:" data-option-value="16" data-option-display-value="sick">
    <i class="ps-emoticon ps-emo-16"></i><span>sick</span>
  </a>
  <a class="mood-list" id="postbox-mood-17" href="javascript:" data-option-value="17" data-option-display-value="sad">
    <i class="ps-emoticon ps-emo-17"></i><span>sad</span>
  </a>
  <a class="mood-list" id="postbox-mood-18" href="javascript:" data-option-value="18" data-option-display-value="blessed">
    <i class="ps-emoticon ps-emo-18"></i><span>blessed</span>
  </a>
</div>

// javascript，用于处理上述html链接上的点击

$(".mood-list").click(function(e){
   // get the appropriate link that was 
   // clicked and store it in the variable
   // mood
   var mood =  e.target;
    //sometimes when a particular link is clicked this 
   // will log as "undefined"
    console.log(mood);
//find the icon and get it's class    
var icon = $(mood).find("i");
    if(icon != "null" || icon != "undefined"){
   // find the "<i></i>" tag and get the class  
   icon = $(icon).attr("class");

     //sometimes when a particular link is clicked this 
   // will also log as "undefined"  
    console.log(icon);
    }
 var span = $(mood).find("span")[0];        
   if(span != "null" || span != "undefined"){
     //find the span element and gets html
    //sometimes when a particular link is clicked this 
   // will also log as "undefined"  
console.log(span);
   }

});

Answer 1

您的主要问题是您的价值比较。您不应将其与字符串值"null"和"undefined"进行比较，而应与实际的null和undefined进行比较。但是，在这种情况下，由于jQuery返回一个列表（即使未找到任何元素），因此if ($(mood).find("i").length) { ... }和if ($(mood).find("span").length) { ... }

这将确保您的“找到”和“未找到”检查正确无误，这意味着您将不会尝试在没有找到的元素上找到子元素（即.find("i")或.find("span")） t首先存在。

下面是一个简单的示例：

$(".mood-list").on("click", function () {
  var $trigger = $(this);
  var $icon = $trigger.find("i"); // will return a jQuery list of items (list.length === 0 means not found)
  var $span = $trigger.find("span"); // will return a jQuery list of items (list.length === 0 means not found)
  console.log($trigger.get(0));
  if ($icon.length) {
    let iconClass = $icon.attr("class");
    console.log(iconClass);
  }
  else {
    console.log("icon not found");
  }
  if ($span.length) {
    console.log($span.html());
  }
  else {
    console.log("span not found");
  }
});

.mood-list {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="postbox-mood" class="ps-dropdown__menu ps-dropdown__menu--moods ps-js-postbox-mood">
  <a class="mood-list" id="postbox-mood-1" href="javascript:" data-option-value="1" data-option-display-value="joyful">
    <i class="ps-emoticon ps-emo-1"></i><span>joyful</span>
  </a>
  <a class="mood-list" id="postbox-mood-2" href="javascript:" data-option-value="2" data-option-display-value="meh">
    <i class="ps-emoticon ps-emo-2"></i><span>meh</span>
  </a>
  <a class="mood-list" id="postbox-mood-3" href="javascript:" data-option-value="3" data-option-display-value="love">
    <i class="ps-emoticon ps-emo-3"></i><span>love</span>
  </a>
  <a class="mood-list" id="postbox-mood-4" href="javascript:" data-option-value="4" data-option-display-value="flattered">
    <i class="ps-emoticon ps-emo-4"></i><span>flattered</span>
  </a>
  <a class="mood-list" id="postbox-mood-5" href="javascript:" data-option-value="5" data-option-display-value="crazy">
    <i class="ps-emoticon ps-emo-5"></i><span>crazy</span>
  </a>
  <a class="mood-list" id="postbox-mood-6" href="javascript:" data-option-value="6" data-option-display-value="cool">
    <i class="ps-emoticon ps-emo-6"></i><span>cool</span>
  </a>
  <a class="mood-list" id="postbox-mood-7" href="javascript:" data-option-value="7" data-option-display-value="tired">
    <i class="ps-emoticon ps-emo-7"></i><span>tired</span>
  </a>
  <a class="mood-list" id="postbox-mood-8" href="javascript:" data-option-value="8" data-option-display-value="confused">
    <i class="ps-emoticon ps-emo-8"></i><span>confused</span>
  </a>
  <a class="mood-list" id="postbox-mood-9" href="javascript:" data-option-value="9" data-option-display-value="speechless">
    <i class="ps-emoticon ps-emo-9"></i><span>speechless</span>
  </a>
  <a class="mood-list" id="postbox-mood-10" href="javascript:" data-option-value="10" data-option-display-value="confident">
    <i class="ps-emoticon ps-emo-10"></i><span>confident</span>
  </a>
  <a class="mood-list" id="postbox-mood-11" href="javascript:" data-option-value="11" data-option-display-value="relaxed">
    <i class="ps-emoticon ps-emo-11"></i><span>relaxed</span>
  </a>
  <a class="mood-list" id="postbox-mood-12" href="javascript:" data-option-value="12" data-option-display-value="strong">
    <i class="ps-emoticon ps-emo-12"></i><span>strong</span>
  </a>
  <a class="mood-list" id="postbox-mood-13" href="javascript:" data-option-value="13" data-option-display-value="happy">
    <i class="ps-emoticon ps-emo-13"></i><span>happy</span>
  </a>
  <a class="mood-list" id="postbox-mood-14" href="javascript:" data-option-value="14" data-option-display-value="angry">
    <i class="ps-emoticon ps-emo-14"></i><span>angry</span>
  </a>
  <a class="mood-list" id="postbox-mood-15" href="javascript:" data-option-value="15" data-option-display-value="scared">
    <i class="ps-emoticon ps-emo-15"></i><span>scared</span>
  </a>
  <a class="mood-list" id="postbox-mood-16" href="javascript:" data-option-value="16" data-option-display-value="sick">
    <i class="ps-emoticon ps-emo-16"></i><span>sick</span>
  </a>
  <a class="mood-list" id="postbox-mood-17" href="javascript:" data-option-value="17" data-option-display-value="sad">
    <i class="ps-emoticon ps-emo-17"></i><span>sad</span>
  </a>
  <a class="mood-list" id="postbox-mood-18" href="javascript:" data-option-value="18" data-option-display-value="blessed">
    <i class="ps-emoticon ps-emo-18"></i><span>blessed</span>
  </a>
</div>