javascript - jQuery选择div问题

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 6 年前。

Improve this question

我遇到了一个无法解决的真正问题:x

我有一个函数，可以将“selected”类添加到我单击的 div 中，并将按钮的内部 html 更改为单击的 div 的 ID。但是，当我双击同一个 div 时，它会删除选定的类，并且按钮的内部 html 不会更改。

我希望您能帮助我在取消选择时将按钮内部 HTML 设置为其他内容，或者使其无法取消选择选定的 div。

这是我的代码:

$(function(){
  $(".panel-kol").click(function() {
  var mid = $(this).attr('mid');

    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    }

    document.getElementById("id").innerHTML = mid;

    });
});

HTML 是 PHP 生成的，因此我从页面源代码中发布了一个示例

<div class="col-md-3">
<div class="panel panel-kol" mid="2">
    <div class="panel-body profile white">
        <div class="profile-image"><img src="../assets/images/users/female.svg" alt="Osoba"></div>
        <div class="profile-data">
            <div class="profile-data-name" style="font-weight: bold;">Agata Jacynów</div>

            <div class="profile-data-title">Lekarz</div>
        </div>
    </div>
    <div class="panel-body">
        <div class="contact-info text-center" style="margin-top: -20px;">
            <p>
                <small>Telefon komórkowy</small>
                <br/>666333999
            </p>
            <p>
                <small>Od - Do</small>
            </p>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" value="07:00:00"/>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" class="form-control" value="14:00:00"/>
                    </div>
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</div>

这是我要更改的按钮:

<div class="col-md-3">
    <button id="id" class="btn btn-block" style="font-weight: bold; cursor: default;">ID</button>
</div>

任何帮助将不胜感激!

Answer 1

只需将其放入 exisintng if 中，并在您取消选择 div 时将其设置为所需的值。

$(function() {
    $(".panel-kol").click(function() {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
            $("#id").text("ID"); // change the text here as you like
        }
        else {
            $('.selected').removeClass('selected');
            $(this).addClass('selected');
            $("#id").text($(this).attr('mid'));
        }
    });
 });