Question

我是使用javascript的初学者，但在单击按钮时无法编辑特定的div时遇到问题。目前，我可以编辑div，但也可以使页面上的所有div可编辑。我的代码可以在下面看到。任何帮助将不胜感激。

    <form id="contact" action="" method="post">
        <h3>Event Information</h3>
        <div>
            <fieldset>
                <div id="textarea" type="text" name="textarea" required readonly tabindex="5" required><p class="font">{{ userEvent.description }}</p></div>
            </fieldset>
            <input name="Edit" type="button" value="Edit">
        </div>
    </form>

{％块脚本％}

$('input').click(function(){
    var $div=$('div'), isEditable=$div.is('.editable');
    $('div').prop('contenteditable',!isEditable).toggleClass('editable')
})


$('input[name="Edit"]').click(function(){
    $(this)
    .val(function(i,v){
        return v === 'Edit' ? 'Save' : 'Edit';
    })
    .prev('textarea[required]')
    .prop('readonly',function(i,r){
        return !r;
    });
});

{％endblock％}

Answer 1

如果您尝试选择一个具有ID的div，则可以使用getElementById()。

var x = document.getElementById('insert div id here');

您不需要使用变量，并且如果不想，则：

`document.getElementById（'divId'）。innerHTML ='hi';

将innerHTML = 'hi'替换为所需的任何代码。如果您想要更好的解释，请单击here。

希望这会有所帮助！

Answer 2

您可以使用：nth-child（）选择器来选择要修改的特定“ div”。

如果要使用纯JS，请使用document.querySelectorAll（'div'）并使用方括号访问特定的div。

Ex-

var divs = document.querySelectorAll('div');
var second = divs[1];

谢谢

Answer 3

您可以一次性完成所有操作，但是您需要

导航至fieldset，然后导航至其中的div
正确处理添加/删除contentEditable道具的条件。

$('input[name="Edit"]').click(function(){
    $(this)
    .val(function(i,v){
        return v === 'Edit' ? 'Save' : 'Edit';
    })
    .prev('fieldset')
    .children("div")
    .prop('contentEditable',function(i,r){
        return r == "inherit" ? true : "inherit";
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="contact" action="" method="post">
    <h3>Event Information</h3>
    <div>
        <fieldset>
            <div id="textarea" type="text" name="textarea" required readonly tabindex="5" required ><p class="font">{{ userEvent.description }}</p></div>
        </fieldset>
        <input name="Edit" type="button" value="Edit">
    </div>
</form>

定位特定ID，并使用javascript使该特定div可编辑

3 个答案: