使用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"/>