使用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實現相同的目標？

---

由於添加了這個方便的指南 ，我已經成功安裝了jQuery

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

在標題的源視圖中。 另外，我添加了var jq = jQuery.noConflict(); 在屬於此問題的javascript窗口的頂部。

通過進一步檢查源代碼，我發現問題的ID是QID2 。 因此，基於此答案，我嘗試了

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

但沒有成功。

請注意 ，理想情況下，我不想手動指定問題ID，而是像使用常規JavaScript一樣參考問題。

編輯 ：定性問題的html是：

<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已使用的prototypejs）非常簡單地執行此操作：

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