Question

在这部分代码中，我有几个由百万美元自动生成的表单，每个表单都允许您投票选择一个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点击回调功能，并且我还调用了您的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>

单击按钮表单后隐藏多个div

2 个答案: