單擊按鈕表單后隱藏許多div

Question

在這部分代碼中，我有thymeleaf自動生成的幾種表單，每種表單都可以讓您投票給某個Web位置，現在我希望一旦您單擊特定Web位置的問題，其他表單就會自動從視圖中隱藏。

例如，如果我有3個網站並投票給ID = 2的網站問題，ID = 1.3的網站會自動隱藏。

 <div th:each="childLocation : ${childLocations}"> <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}"/> <div th:each="webQuestion : ${@webQuestionRepository.findByWebLocation(childLocation.id)}" class="row sinWebQuestion" style="margin-bottom: 20px;"> <div class="col-sm-12"> <div th:text="${webQuestion.question}" class="sinButtonVoteLabel" style="text-align: center;">How Do?</div> </div> <div class="col-sm-12" style="text-align: center;"> <label th:each="vote : ${ {3, 2, 1, 0} }" class="radio-inline sinButtonVote" style="margin-top: 10px;"> <input type="radio" th:name="|questionVote[${webQuestion.id}]|" th:value="${vote}" /> <img yada:src="@{|/res/img/question/${webQuestion.iconName+vote}.png|}" th:alt-title="|Vote ${vote}|"> </label> </div> </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"> /*<![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() /*[/]*/ }); function afterOpinionSent() { $("div.sinVotoInner").addClass("hidden"); } /*]]>*/ </script> 

單擊問題后，隱藏所有div。

我該如何解決該問題？

Answer 1

試試這個代碼：

<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 click回調函數，並且我也調用了afterOpinionSent函數，因為未調用此函數。

Answer 2

嘗試這個：

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