使用jquery隐藏Qualtrics中的列表项目

Question

我可以使用常规JavaScript在Qualtrics中隐藏列表项目（本例中为第一个）。以下屏幕截图显示了我的问题。

这是我进入属于问题的JavaScript窗口中的代码：

Qualtrics.SurveyEngine.addOnload(function() 
{ 
    /*Place Your JavaScript Here*/ 

    $(this.questionId).getElementsByClassName("ChoiceStructure")[0].getElementsByTagName("li")[0].style.display = "none"; 

}); 

我想知道如何同样可以使用jQuery实现？

---

我已经成功通过在报头的源视图添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

安装的jQuery由于this handy guide。另外，我在属于这个问题的javascript窗口的顶部添加了var jq = jQuery.noConflict();。

通过进一步检查源代码，我发现问题的ID是QID2。基于this answer因此我试过

$("#QID2 .ChoiceStructure ul li:eq(0)").hide(); 

但没有成功。

请注意理想情况下，我不想手动指定问题ID，而是参考常规JavaScript中的问题。

编辑：在HTML中qualtrics问题是：

<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed"> 

    <div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> <div class="Inner BorderColor SAVR"> 

     <div class="InnerInner BorderColor TX"> 

      <fieldset> 

      <!-- BEGIN PARTIALS --> 
      <!-- Partial for defining the ControlContainerContent --> 
      <!-- END PARTIALS --> 

      <h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2> 

      <div class="QuestionBody"> 

       <!-- Begin Choices w/o choice groups --> 

       <ul class="ChoiceStructure">  

        <li class="Selection reg"> <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"><label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span></label></span> <div class="clear"></div> </li> 
        <li class="Selection alt"> <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"><label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span></label></span> <div class="clear"></div> </li> 
        <li class="Selection reg"> <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"><label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span></label></span> <div class="clear"></div> </li> 
        <li class="Selection alt"> <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"><label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span></label></span><div class="clear"></div> </li> 

       </ul> 
       <!-- End Choices w/o choice groups --> 

       <div class="clear zero"></div> 

      </div> 

      </fieldset> 

     </div> 

    </div> 

</div> 

Answer 1

您可以使用prototypejs（其中Qualtrics已经使用）来做到这一点很简单：

Qualtrics.SurveyEngine.addOnload(function() 
{ 
    $(this.questionId).down('li').hide(); 
}); 

Answer 2

也许一些您在JQuery的请求（我指的是括号$(here)内）添加的规则是无效的和JQuery返回错误链接节点元素（或返回“未定义”）。我在上一次构建中使用.class ul li（因为您将类添加到ul）中引发了一个问题。 所以你需要使用

$("#QID2 ul li:eq(0)") 或

$("#QID2 ul.ChoiceStructure li:eq(0)"

关于参照的问题 - 你可以使用变量作为正常JS和JQuery的使用简单的拼接增添价值像

$("#QID"+variableWithQuestionNumber+" li:eq(0)") 

(function(){ 
 
    var counter = 0; 
 
    $(".myButton").click(function(e){ 
 
    if (counter===0){ 
 
     $("#QID2 ul li:eq(0)").hide(); 
 
     counter++; 
 
    }else{ 
 
     $("#QID2 ul li:eq(0)").show(); 
 
     counter--; 
 
    } 
 
    }); 
 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div class="QuestionOuter BorderColor MC QID2" id="QID2" questionid="QID2" posttag="QID2" data-runtime-remove-class-hidden="runtime.Displayed"> 
 

 
    <div class="ValidationError" data-runtime-html="runtime.ErrorMsg" data-runtime-show="runtime.ErrorMsg" style="display: none;"></div> 
 
    <div class="Inner BorderColor SAVR"> 
 

 
    <div class="InnerInner BorderColor TX"> 
 

 
     <fieldset> 
 

 
     <!-- BEGIN PARTIALS --> 
 
     <!-- Partial for defining the ControlContainerContent --> 
 
     <!-- END PARTIALS --> 
 

 
     <h2 class="noStyle"><div class="QuestionText BorderColor">Text</div></h2> 
 

 
     <div class="QuestionBody"> 
 

 
      <!-- Begin Choices w/o choice groups --> 
 

 
      <ul class="ChoiceStructure"> 
 

 
      <li class="Selection reg"> 
 
       <input choiceid="1" aria-labelledby="QID2-1-label" class="radio QR-QID2-1 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~1" value="1" data-runtime-checked="runtime.Selected"> 
 
       <label for="QR~QID2~1" class="q-radio" data-runtime-class-q-checked="runtime.Choices.1.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~1" id="QID2-1-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.1.Selected"> <span>a (0)</span> 
 
       </label> 
 
       </span> 
 
       <div class="clear"></div> 
 
      </li> 
 
      <li class="Selection alt"> 
 
       <input choiceid="2" aria-labelledby="QID2-2-label" class="radio QR-QID2-2 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~2" value="2" data-runtime-checked="runtime.Selected"> 
 
       <label for="QR~QID2~2" class="q-radio" data-runtime-class-q-checked="runtime.Choices.2.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~2" id="QID2-2-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.2.Selected"> <span>a (1)</span> 
 
       </label> 
 
       </span> 
 
       <div class="clear"></div> 
 
      </li> 
 
      <li class="Selection reg"> 
 
       <input choiceid="3" aria-labelledby="QID2-3-label" class="radio QR-QID2-3 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~3" value="3" data-runtime-checked="runtime.Selected"> 
 
       <label for="QR~QID2~3" class="q-radio" data-runtime-class-q-checked="runtime.Choices.3.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~3" id="QID2-3-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.3.Selected"> <span>b (2)</span> 
 
       </label> 
 
       </span> 
 
       <div class="clear"></div> 
 
      </li> 
 
      <li class="Selection alt"> 
 
       <input choiceid="4" aria-labelledby="QID2-4-label" class="radio QR-QID2-4 QWatchTimer" type="radio" name="QR~QID2" id="QR~QID2~4" value="4" data-runtime-checked="runtime.Selected"> 
 
       <label for="QR~QID2~4" class="q-radio" data-runtime-class-q-checked="runtime.Choices.4.Selected"></label> <span class="LabelWrapper"> <label for="QR~QID2~4" id="QID2-4-label" class="SingleAnswer" data-runtime-class-q-checked="runtime.Choices.4.Selected"> <span>b (3)</span> 
 
       </label> 
 
       </span> 
 
       <div class="clear"></div> 
 
      </li> 
 

 
      </ul> 
 
      <!-- End Choices w/o choice groups --> 
 

 
      <div class="clear zero"></div> 
 

 
     </div> 
 

 
     </fieldset> 
 

 
    </div> 
 

 
    </div> 
 

 
</div> 
 

 
<input type="button" class="myButton" value="Push me"/>