0

我有一个带有标签和其他东西的 div。标签的内容为：“第 1 步”。

<div class="methodContainer">
    <label class="steps">Step 1:</label>
    <textarea name="step" class="stepMethod glowingBorder"></textarea>
    <div class="removeMethod" title="Click to remove this ingredient">                                  
    </div>
</div>

如果您单击页面上的另一个 div，我使用 jQuery 添加与此处代码完全相同的副本并将其放在此代码后面。

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step 1:</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}

这可以根据用户的需要重复多次。

但是这样所有带有类步骤的标签都会有内容：“步骤1”。我希望第二个有“Step 2”，第三个有“Step 3”，依此类推。我该怎么做呢？

！！！！编辑！！！！
感谢您的快速回答！但是我忘了说我也有可能删除一部分。我这样做

$('.removeMethod').live('click', function() {
    $(this).parents('.methodContainer').remove();
}

因此，如果我使用 Arun P Johny 的答案，它会起作用：) 添加的每条内容都将标有步骤 1、2、3 等等。但是当用户删除例如第二步时，这些步骤现在将是：1,3,4 等等。我该如何解决？

4

4 回答 4

2

尝试

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step ' + ($('.methodContainer').length + 1)  + ':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}

编辑：删除后重新索引项目

$('.removeMethod').live('click', function() {
    $(this).parents('.methodContainer').remove();

    $('.partMethod').children('.methodContainer').each(function(index, item){
        $(this).find('.steps').html('Step ' + (index + 1) + ':')
    })
}
于 2013-05-15T10:08:30.267 回答
0

你可以这样做：

$('.plusMethod').click( function() {
    $('<div class="methodContainer"><label class="steps">Step '+($('.steps').length+1)+':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo('.partMethod');
}
于 2013-05-15T10:07:11.830 回答
0

使用 css 计数器元素：

<!DOCTYPE html>
<html>
<head>
<style>
body {counter-reset:section;}
#doei h1 {counter-reset:subsection;}
#doei h1:after
{
counter-increment:section;
content:" Step " counter(section) ;
}
h2:after 
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>
<div id="doei">
<div id="hoi">
<h1>HTML tutorials</h1>
</div>

<div id="hoi">
<h1>Scripting tutorials</h1>
</div>

<div id="hoi">
<h1>XML tutorials</h1>
</div>
</div>

</body>
</html>
于 2013-05-15T10:19:34.177 回答
0

通过计算您拥有的数字，然后将其用作您的步数：

$('.plusMethod').click( function() {
    var $partMethod = $(".partMethod"); // I take it there's only one of these
    var stepNum = $partMethod.find(".steps").length + 1;
    $('<div class="methodContainer"><label class="steps">Step ' + stepNum + ':</label><textarea name="step" class="stepMethod glowingBorder"></textarea><div class="removeMethod" title="Click to remove this ingredient"></div></div>').appendTo($partMethod);
});
于 2013-05-15T10:07:46.910 回答