在按钮/链接单击上进入评论表

Question

我有这样的按钮/链接

<a href='#' id='button-element'><span class='fa fa-comment' ></span></a>

这样的评论形式

<form method="POST" id="comment_form">
     ....
     <textarea name="comment_content" id="comment_content" class="form-control" rows="5"></textarea>
</form>

我已经添加了此JS，因此，当我单击按钮时，应该将焦点移到comment_content文本区域周围并加边框。

    var $code = $('#comment_content');
    $('#button-element').on('mousedown', function () {
        $(this).data('inputFocused', $code.is(":focus"));
    }).click(function () {
        if ($(this).data('inputFocused')) {
            $code.blur();
        } else {
            $code.focus();
        }
    });

问题是我有多个带有多个评论按钮的项目，并且仅当我单击第一个项目时上述解决方案才有效。如果我单击其他按钮不起作用。

下面是它的工作方式。可能是什么问题？

    var $code = $('#comment_content');
		$('#button-element').on('mousedown', function () {
			$(this).data('inputFocused', $code.is(":focus"));
		}).click(function () {
			if ($(this).data('inputFocused')) {
				$code.blur();
			} else {
				$code.focus();
			}
		});

#comment_content:focus, #comment_content:active { 
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href='#' id='button-element'><span class='fa fa-comment' ></span>Button 1</a>
<a href='#' id='button-element'><span class='fa fa-comment' ></span>Button 2</a>
<a href='#' id='button-element'><span class='fa fa-comment' ></span>Button 3</a>
<a href='#' id='button-element'><span class='fa fa-comment' ></span>Button 4</a>



<form method="POST" id="comment_form">

    <textarea name="comment_content" id="comment_content" class="form-control" rows="5"></textarea>
</form>

Answer 1

id在文档中必须唯一。您可以改用class。

var $code = $('#comment_content');
		$('.button-element').on('mousedown', function () {
			$(this).data('inputFocused', $code.is(":focus"));
		}).click(function () {
			if ($(this).data('inputFocused')) {
				$code.blur();
			} else {
				$code.focus();
			}
		});

#comment_content:focus, #comment_content:active { 
    border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href='#' class='button-element'><span class='fa fa-comment' ></span>Button 1</a>
<a href='#' class='button-element'><span class='fa fa-comment' ></span>Button 2</a>
<a href='#' class='button-element'><span class='fa fa-comment' ></span>Button 3</a>
<a href='#' class='button-element'><span class='fa fa-comment' ></span>Button 4</a>



<form method="POST" id="comment_form">

    <textarea name="comment_content" id="comment_content" class="form-control" rows="5"></textarea>
</form>