Question

我有一个问题列表，每个问题都有一个答案列表（可以是1-5中的任何整数）。我想动态地为每个问题创建一个图表，使用与特定“等级”匹配的所有答案的计数;即所有答案都是'1'，'2'，'3'等等。

所以我所做的就是设置一个for循环，为每个问题创建一个元素;此元素用作图表的占位符。（顺便说一句，我使用的是flot chart）。

我遇到的问题是尝试动态命名占位符;我真正想要的是创造一些看起来像这样的东西：

<div id='chart1'/>
<div id='chart2'/>

等

我最接近的是：

<div id="'chart'@currentQuestion"/>

当然会给出这样的id：'chart'1

稍后，当我尝试将图表附加到我创建的div时，以下内容不起作用：

$("#'chart'"+i).append(div); //where i is the current loop counter

如果我使用

 $("#chart"+i).append(div);

它正确找到元素'chart1'，'chart2'等;但是我很难将div命名为匹配。

有人可以帮忙吗？除非你知道如何解决它，这似乎微不足道： - ）

编辑：根据要求，这是相关的HMTL：

<div id="'chart@currentQuestion'">CHART</div>

解决：

喜欢这样：id =“chart @（currentQuestion）”（通过同事）感谢您的努力。

Answer 1

你没有正确关闭你的div。试试这段代码

<div id='chart1' style="border:dashed">
</div>
<br />

<div id='chart2' style="border:dotted">
</div>

<script type="text/javascript" src="jquery_library.js">
</script>
<script type="text/javascript">
 function fnc(value){

$("#chart"+value).append('1');
}
</script>
<input type="button" onclick="fnc(1)" value="for div1"/>
<input type="button" onclick="fnc(2)"value="for div2" />

Answer 2

你正在使用剃刀语法，所以这里应该如何。

// Define your counter
@{long i = 0;}

// On document ready dynamically add your items
$("document").ready(function(){
    // Create red divs starting by zero
    // after 5 divs stop creating red divs
    @for (i = 0;i<5;i++){
        @:$("#form").append('<div id="chart' + @(i) + '">Red</div>');
    }
});

// I made a button for action, you can choose other ways to invoke this function
$("#form>input").click(function(){
    // Your counter is at 4 now
    // lets change it to 2 
    @(i = 2;) // Now your counter is at 2 
    // Put a blue div into 2nd div starting by 0
    $("#chart"+@(i)).append('<div class="blue">blue</div>');
});

这就是你如何在脚本中使用razor语法

如何在Javascript循环中动态设置id？

2 个答案: