weixin_33736649 2018-11-26 18:56 采纳率: 0%
浏览 126

如何显示/隐藏div Ajax Jquery?

我在这个问题上花了很多时间,我一直找不到.parent()、Next()、.Next()或.Next()。为此,我想在设置了.put-range滑块值后,在Ajax上成功显示出名为.SubQuestion的div。一切运行良好,但是在$(this).next(".SubQuestion").show();和$(this).next(".SubQuestion").hide();上却不起作用。

我找不到div类显示,CSS也不工作。

<div class="row">
    <div class="col-9 my-1 input-ranges" id="range">
        @{ var questionId = Model.QuestionAndAnswer[i].QuestionId;
            var AcceptableScore = Model.QuestionAndAnswer[i].QuestionAcceptableScore;
        }
        @Html.TextBoxFor(model => model.QuestionAndAnswer[i].Ans_Score, htmlAttributes: new { @id = questionId, @tag = AcceptableScore, @class = "input-range", @min = "1", @max = "10", @step = "1", @type = "range" })
        YourScore <span class="range-value">1</span>
    </div>

    <div class="col-3">
        <a data-toggle="collapse" href="#ScoreComment_@i" role="button" aria-expanded="false" aria-controls="collapseExample">
            <div class="fs-3x text-center text-info"><i class="la la-comment-o"></i></div>
        </a>
    </div>

    <div class="col-12 bg-info SubQuestion" style="display:none">
        <h1>Result</h1>
    </div>

    <div class="col-12">
        <div class="collapse my-1" id="ScoreComment_@i">
            @Html.TextAreaFor(model => model.QuestionAndAnswer[i].Ans_Score_Note, new { @class = "form-control p-1 w-100", @maxlength = "4000", @rows = "4", @placeholder = "توضیحات" })
        </div>
    </div>
</div>

<script>
      $(function ($) {
         console.log($.ajax);
         $('.input-range').on('change', function () {
             $(this).next('.range-value').html(this.value);

             var questionId = $(this).attr("id");
             var QAScore = $(this).attr("tag");
             var rangevalue = $(this).nextAll('.range-value').first().text();
             if (rangevalue < QAScore) {
                 $.ajax({
                     url: "/Question/GetSubQuestion",
                     type: "POST",
                     datatype: "json",
                     data: { QuestionId: questionId },
                     success: function (data) {
                         $(this).next(".SubQuestion").html(data);
                         $(this).next(".SubQuestion").show(); 
                     }
                 });
             }
             else {
                 $(this).parent().nextAll(".SubQuestion").hide();
             }
         });
     });

    </script>
  • 写回答

1条回答 默认 最新

  • 七度&光 2018-11-27 06:25
    关注

    Here was the solution Thanks to @AndrewLohr

    $(function ($) {
        $('.input-range').on('change', function () {
            $(this).next('.range-value').html(this.value);
            let subQuestion = $(this).parent().nextAll(".SubQuestion").show();
            var questionId = $(this).attr("id");
            var QAScore = $(this).attr("tag");
            var rangevalue = $(this).nextAll('.range-value').first().text();
            if (rangevalue < QAScore && rangevalue!=10) {
                $.ajax({
                    url: "/Question/GetSubQuestion",
                    type: "POST",
                    datatype: "json",
                    data: { QuestionId: questionId },
                    success: function (data) {
                        subQuestion.html(data);
                        subQuestion.show();
                    }
                });
            }
            else {
                $(this).parent().nextAll(".SubQuestion").hide();
            }
        });
    });
    
    评论

    报告相同问题?

    悬赏问题

    • ¥15 关于#git#的问题,请各位专家解答!(相关搜索:开源项目)
    • ¥15 matlab处理脑电数据悬赏(时序图+预处理+频谱图)
    • ¥100 r语言多元回归模型怎么看表达式
    • ¥15 PMM 9010/30P
    • ¥15 pom文件依赖管理,未找到依赖
    • ¥15 现在后端返回给我一堆下载地址,都是一个视频切片后的,如何在uniapp安卓环境下将这些分片的视频下周并且合并成原始视频并下载到本地。
    • ¥15 Unity导出2D项目运行时图片变成马赛克
    • ¥15 关于communitytoolkit.mvvm的生成器得到的代码看起来没有被使用的问题
    • ¥15 matlab中此类型的变量不支持使用点进行索引
    • ¥15 咨询第六届工业互联网数据创新大赛原始数据