Question

我有3个文本框：身高，体重，BMI 和一个名为“ 计算”的按钮，JS功能必须计算单击该按钮的人的BMI “ 计算”，但是它似乎不起作用，我单击该按钮却没有任何作用，为什么？我是否需要创建其他类来放置JS代码？

这是编辑后的视图和JS功能：

   @model IEnumerable<FitnessWebApplication.Models.Measurement>

@{
    ViewBag.Title = "Index";
}



    <script src="jquery.js"></script>

    <script>

        @section scripts{
            $(document).ready(function () {
                $('#calculate').click(function () {
                    var weight = Number($('#Weight').val());
                    var height = Number($('#Height').val());
                    var bmi = height / (weight * weight);
                    $('#BMIBox').val(bmi);
                });
            });//jq
        }
    </script>

<h2>Your Measurements</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">


    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Weight)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Height)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Neck)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Waist)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Taken)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Weight) kg
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Height) cm
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Neck) cm
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Waist) cm
            </td>
            <th>
                @Html.DisplayFor(modelItem => item.Taken)
            </th>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

<hr />

<h1>Calculate</h1>
<hr />
<h2>BMI</h2>

<form>



    <table>

        <tr>
            <td align="right"><b>Weight:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Weight" class="form-control" id="Weight" /></div><b>kg</b></td>
        </tr>
        <tr>
            <td align="right"><b>Height:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" id="Height" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>BMI:</b></td>
            <td align="left"><div class="col-xs-4"><input type="text" name="BMI" class="form-control" id="BMIBox" /></div></td>
        </tr>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Calculate" class="btn btn-default" id="calculate" />

        </div>

    </div>



</form>

<hr />
<h2>BF% (aproximated)</h2>
<p>(All the measurements must be taken at the narrowest point)</p>

<form>
    <table>
        <tr>
            <td><b>Male</b></td>
            <td><input type="radio" name="Male" /></td>
            <td><b>Female</b></td>
            <td><input type="radio" name="Female" /></td>
        </tr>
        <tr>
            <td align="right"><b>Height:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Height" class="form-control" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Waist:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Waist" class="form-control" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Hip:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Hip" class="form-control" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>Neck:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Neck" class="form-control" /></div><b>cm</b></td>
        </tr>
        <tr>
            <td align="right"><b>BF%:</b></td>
            <td align="left"><div class="col-xs-4"><input type="text" name="BF%" class="form-control" /></div><b>%</b></td>
        </tr>
    </table>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Calculate" class="btn btn-default" onclick="location.href='<%: @Url.Action("CalculateBF", "Measurements") %>'">
        </div>
    </div>


</form>

Answer 1

您正在使用asp.net-mvc
您还对以下文件夹使用了共享布局：views / Shared / _Layout.cshtml

解决方案处于以下步骤

确保已在共享布局中包含jQuery
在共享布局文件中包含jquery之后，您必须应用@RenderSection("scripts", required: false)
在您要应用点击事件的第二个打开文件之后
仅在以下代码之间应用jQuery：

@section scripts{
    <script>
    	$(document).ready(function(){    
                //Your code will be here
            });//jq
    </script>
}

Answer 2

尝试一下：

<script src="jquery.js"></script>
<script>
    $(function(){
         $('body').on("click", "#calculate" , function () {
              var weight = Number($('#Weight').val());
              var height = Number($('#Height').val());
              var bmi = height / (weight * weight);
              $('#BMIBox').val(bmi);
        });
     });
</script>

重要的事情：

第一个$(function(){})等于document.ready。
地址。您的src必须基于view文件。如果jquery.js恰好在最终html旁边，则您的src是正确的。如果jquery文件位于根目录中，则可以尝试以下操作：src="/jquery.js"
如果要检查脚本是否已执行，请在绑定click事件之前添加以下行： alert("Reached here!");
正在运行的脚本的优先级。 jQuery必须先加载其他脚本。
按F12。现在，在console标签中，键入：$("div")

如果您得到正确答案，则表明jquery已成功加载。

在元素可能稍后添加到页面（或现在存在）时使用.on()。因此，在此示例中没有必要。

提示：

.cshtml文件，编译为简单的html输出。仅当您要使用layouts时，sections才有用。

脚本是html文件的常见部分，因此您可以添加脚本而无需任何多余的部分。

当您将所有html标签包装在<body></body>

中时，我上面的代码将是正确的

单击按钮

2 个答案: