Question

我对javascript很新，并且已经有一段时间了，但仍然无法弄明白，所以任何关于如何继续这样做的建议都会非常感激。我试图将它放在一个jsFiddle中，但它不起作用，即使部分代码在我的计算机上工作。我有第一部分（#preheat和#pans）做我想做的事。

的javascript：

<script>    
    $(function () {   
        $('#preheat').on('click', function () {
            $("<p>Preheat oven to 350°F. Prepare two 9-inch pans by spraying with baking spray.</p>").appendTo('#content');

            $("#steps").replaceWith('<span id="steps1">Allow to <span id="verb_1">cool</span> for about 10 minutes, remove from <span id="noun_1">pans </span>and cool completey.</span>');   
        });


//this part is not working
        $('#cool').on('click', function () {
            $("<p>Allow to cool for about 10 minutes, remove from pans and cool completely.</p>").appendTo('#content');

            $("#steps1").replaceWith('<span id="verb_2">Bake</span><span id="noun_2">chocolate cake</span> for 30-35 minutes, until a toothpick or cake tester inserted in the center comes out clean.'); 
        }); 

        $('#pans').on('click', function () {
            $("<p>Preheat oven to 350°F. Prepare two 9-inch pans by spraying with baking spray.</p>").appendTo('#content');

            $("#steps").replaceWith('<span id="verb1">Distribute</span> cake batter evenly between the <span id="noun1">two cake pans.</span>');
        });    

    });
</script>

HTML：

    <div id="steps">
            <span id="preheat">Preheat</span>
            <span>oven to 350°F. Prepare</span>
            <span id="pans">two 9-inch pans</span>
            <span>by spraying with baking spray.</span>
        </div>



    <div id="content">
        <p></p>
   </div>

的CSS：

 #content{
    float:right;
}

Answer 1

$('#cool').on('click', function () {

不起作用，因为没有标识为cool的元素。

另外，如果您要为具有标识cool的元素委派click事件，请执行

$(document).on('click',''#cool', function () { // you can use any valid selector for a parent element of #cool instead of document

这样的JSFiddle可能就是你所需要的。

更新了JSFiddle

旁注：在您的代码末尾，您尝试替换不再存在的#steps，因为您之前已将其替换为其他内容。您可能希望使用html()函数代替replaceWith()，而不是JSFiddle

将不同的文本onClick替换为SAME div

1 个答案: