Question

我在jquery 1.10.2之前使用了现有的代码。我试图在调试模式下运行，似乎没有达到<text>中的代码。到达CalculteMyAgeOne，而从未到达CalculateMyAgeTwo。我在视图中有以下代码。为什么它不再执行<text>中的代码？

注意：我添加了AddRows函数，并且在调试模式下达到了AddRows函数，但是，对于CalculateMyAgeTwo，情况并非如此

<script type="text/javascript">
    $(function () {
        CalculateMyAgeOne();
@if (Mode)
{    
        <text>
            CalculateMyAgeTwo();
            AddRows(@(5 - Model.Rows.Length));      
        </text>
 }
    });

    function CalculateMyAgeOne() {
        $("#table tbody tr:last").hide();
    }

    @if (Mode){ //Note that Mode is true
    <text>
        function CalculateMyAgeTwo() {
        }
        function AddRows(rowsToAdd){
        }

    </text>
    }

Answer 1

这是javascript中的语法错误。您不能在JS代码中包含HTML元素（如<text>）这基本上永远不会奏效。删除<text>标签，您的JS将再次运行。

Answer 2

由于您已经标记了ASP MVC，我想澄清一下<text>元素是一个特殊的Razor元素（Razor是一个具有自己语法的ASP MVC视图引擎），它与JavaScript无关或HTML。从this excellent post介绍ASP MVC中的一些Razor语法：

标签是由Razor专门处理的元素。它导致Razor将块的内部内容解释为内容，并且不呈现包含标记元素（意思是只会呈现元素的内部内容 - 标签本身不会）。这样可以在您想要的时候方便呈现未由HTML包装的多行内容块元件。

要使其工作，<text>元素必须位于Razor代码块中。否则，它将在生成的HTML上呈现为原样（在您的情况下导致语法错误）。

假设此脚本元素位于Razor视图中，以下代码：

<script type="text/javascript">
    $(function () {
        CalculateMyAgeOne();
        <text>
            CalculateMyAgeTwo();        
        </text>
    });
    function CalculateMyAgeOne() {
        alert("CalculateMyAgeOne");
    }
    function CalculateMyAgeTwo() {
        alert("CalculateMyAgeTwo");
    }
</script>

将完全按照发送到浏览器的HTML进行渲染，并且您会收到其他人已经指出的语法错误。（基本上没有看到警报）。

但是，如果Razor视图中的代码块中有<text>元素，请参见此示例：

<script type="text/javascript">
    $(function () {
        CalculateMyAgeOne();
        @if ( true /* some meaningful condition in real code */ ) { 
            <text>
            CalculateMyAgeTwo();        
            </text>
        }
    });
    function CalculateMyAgeOne() {
        alert("CalculateMyAgeOne");
    }
    function CalculateMyAgeTwo() {
        alert("CalculateMyAgeTwo");
    }
</script>

然后，当条件为真时，这将生成此结果HTML：

<script type="text/javascript">
    $(function () {
        CalculateMyAgeOne();
            CalculateMyAgeTwo();
    });
    function CalculateMyAgeOne() {
        alert("CalculateMyAgeOne");
    }
    function CalculateMyAgeTwo() {
        alert("CalculateMyAgeTwo");
    }
</script>

如果条件为假，则不会呈现对CalculateMyAgeTwo的调用。如果您在最后一个示例中删除了<text>元素，Razor会认为CalculateMyAgeTwo是服务器端C＃代码的一部分，并且您会在呈现视图时出现服务器端错误。

希望它有所帮助！

Answer 3

文本标签需要样本中缺少的剃刀上下文或条件。

如果Mode = true，则以下更新样本正常并且已达到功能

@{
    var Mode = true;
}

<script type="text/javascript">

    $(function () {
        CalculateMyAgeOne();
        @if (Mode)
        {
            <text>
            CalculateMyAgeTwo();
            </text>
        }

    });

    @if (Mode)
    {
         <text>
        function CalculateMyAgeOne() {
            alert("one");
        }

        function CalculateMyAgeTwo() {
            alert("two");
        }
        </text>
    }

</script>

<text>中的代码不再执行</text>

3 个答案: