jQuery : 包含 Selector if else 语句

Posted 2023-02-23

【中文标题】jQuery : 包含 Selector if else 语句

【英文标题】：jQuery :contains Selector if else statement

【发布时间】：2013-03-09 23:12:28

【问题描述】：

我有一个结果页面，可以向用户展示他们在网络表单上的得分情况。我正在尝试根据他们的回答显示不同的消息。

我设置了一个基本警报来显示用户选择的内容。

var q1 = $('#webform-component-fieldset-1--question-1').text();
alert(q1);

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")')) 
    $('.results-wrapper').hide();
    $('.results').append('<div class="popup">User Selected A. Yes, for the first answer.</div>');

else if ($('#webform-component-fieldset-1--question-1:contains("B. No")')) 
    $('.results-wrapper').hide();
    $('.results').append('<div class="popup">User Selected B. No, for the first answer.</div>');

else if ($('#webform-component-fieldset-1--question-1:contains("C. I do not know")')) 
   $('.results-wrapper').hide();
   $('.results').append('<div class="popup">User Selected C. I do not know, for the first answer.</div>');  

else 
   alert('something went wrong');

http://jsfiddle.net/Hr6Lj/10/

【问题讨论】：

那么问题/疑问是什么？

你为什么要这样使用选择器？难道你不能获取$('#webform-component-fieldset-1--question-1') 然后通过html() 测试它的内容吗？

@JasonSperske 为什么要测试元素的字符串内容而不是仅仅测试元素是否存在？当他可以将.length 添加到他当前的代码中时，这似乎是一种更复杂的方式。

@KevinB，我想这感觉像是对我的 Sizzle 的过度使用，也许这是一个合理的使用，我已经发布了我的方法

@JasonSperske 它肯定需要更复杂，我可能会将它修复得更远，将答案保存在对象而不是 html 中。

【参考方案1】：

我就是这样做的（使用 jQuery 的 data() 函数）(demo)

<div class="results">
    <div class="results-wrapper">
        <div class="form-item webform-component webform-component-display" id="webform-component-fieldset-1--question-1"
        data-answer="C">C. I do not know</div>
    </div>
</div>

<script>
  var updateAnswer = function (question) 
    var answer = question.data('answer');
    if (answer === 'A') 
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected A. Yes, for the first answer.</div>');
     else if (answer === 'B') 
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected B. No, for the first answer.</div>');
     else if (answer === 'C') 
      $('.results-wrapper').hide();
      $('.results').append('<div class="popup">User Selected C. I do not know, for the first answer.</div>');
     else 
      alert('something went wrong');
    
  
  updateAnswer($('#webform-component-fieldset-1--question-1'));
</script>

【讨论】：

使它（稍微）更通用

【参考方案2】：

以下将永远为真，因为对象永远为真。

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")'))

您想知道是否选择了任何元素。

if ($('#webform-component-fieldset-1--question-1:contains("A. Yes")').length)