在點擊按鈕表格後隱藏多個div

Question

在這部分代碼中，我有幾種由thymeleaf自動生成的表單，每個表單允許您爲網站投票，現在我希望一旦您點擊某個問題特定的網站位置，其他人自動隱藏視圖。例如，如果我有3個網站位置並投票支持id = 2的網站位置問題，則id = 1.3的網站位置會自動隱藏。

<div th:each="childLocation : ${childLocations}"> \t 
 
    <form th:action="@{/sendVote}" enctype="multipart/form-data" method="post" 
 
    data-successHandler="afterOpinionSent" class="s_ajaxForm" th:object="${childLocation}"> 
 
    <input type="hidden" name="webLocationId" th:value="${childLocation.id}" th:if="${childLocation!=null}"/> 
 
\t \t <div th:each="webQuestion : ${@webQuestionRepository.findByWebLocation(childLocation.id)}" class="row sinWebQuestion" style="margin-bottom: 20px;"> 
 
\t \t <div class="col-sm-12"> 
 
\t \t \t <div th:text="${webQuestion.question}" class="sinButtonVoteLabel" style="text-align: center;">How Do?</div> 
 
\t \t </div> 
 
\t \t <div class="col-sm-12" style="text-align: center;"> 
 
\t \t \t <label th:each="vote : ${ {3, 2, 1, 0} }" class="radio-inline sinButtonVote" style="margin-top: 10px;"> 
 
\t \t \t <input type="radio" th:name="|questionVote[${webQuestion.id}]|" th:value="${vote}" /> 
 
\t \t \t \t <img yada:src="@{|/res/img/question/${webQuestion.iconName+vote}.png|}" th:alt-title="|Vote ${vote}|"> 
 
\t \t \t </label> 
 
\t \t </div> 
 
\t \t </div>  
 
     <button th:id="|sendVoteButton${childLocation.id}|" type="submit" class="s_ajaxForm btn btn-default btn-block hidden">Send Opionion</button> 
 
    </form> 
 
</div>

我嘗試使用內嵌的JavaScript：

<script type="text/javascript" th:inline="javascript"> 
 
\t /*<![CDATA[*/ 
 
\t $(".sinButtonVote > img").click(function(e){ 
 
\t $(this).parents("div.sinWebQuestion").addClass("voteChosen"); 
 
\t $("#sendVoteButton[(${childLocation.id})]").removeClass("hidden"); 
 
\t $("#sendOpinion[(${childLocation.id})]").removeClass("hidden"); 
 
\t \t \t \t \t 
 
\t /*[# th:each="n : ${childLocations}"]*/ 
 
    if([(${n.id})]!=[(${childLocation.id})]) { 
 
\t \t \t $("#sinVoto[(${childLocation.id})]").hide() 
 
\t /*[/]*/ 
 
\t }); 
 
\t function afterOpinionSent() { 
 
\t \t \t $("div.sinVotoInner").addClass("hidden"); 
 
\t \t } 
 
\t /*]]>*/ 
 
</script>

一旦你點擊了這個問題隱藏所有股利。

我該如何解決這個問題？

Answer 1

試試這個：

<script type="text/javascript" th:inline="javascript"> 
      /*<![CDATA[*/    
function hiddenFunction(xId){ 
      var userInput = document.getElementById("webLocationId"+xId).value; 
      document.getElementById("userInputId").innerHTML = userInput; 
      /*[# th:each="n : ${childLocations}"]*/ 
       if([(${n.id})]!=userInput) { 
        $("#sinVoto[(${n.id})]").addClass("hidden"); 
       } 
      /*]]>*/ 
     </script> 

Answer 2

試試這個代碼：

<script type="text/javascript" th:inline="javascript"> 
    /*<![CDATA[*/ 
    $(".sinButtonVote > img").click(function(e){ 
     $(this).parents("div.sinWebQuestion").addClass("voteChosen"); 
     $("#sendVoteButton[(${childLocation.id})]").removeClass("hidden"); 
     $("#sendOpinion[(${childLocation.id})]").removeClass("hidden"); 

     /*[# th:each="n : ${childLocations}"]*/ 
     if([(${n.id})]!=[(${childLocation.id})]) { 
      $("#sinVoto[(${childLocation.id})]").hide() 
     /*[/]*/ 


    /** this is the new code **/ 
     } 

     afterOpinionSent(); 
    }); 

    /** end of new code **/ 

    function afterOpinionSent() { 
      $("div.sinVotoInner").addClass("hidden"); 
     } 
    /*]]>*/ 
</script> 

我增加了一個額外}關閉IMG點擊回調函數，我也叫你afterOpinionSent功能，因爲這是不會被調用。