Question

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

我有一个添加了类＆＃34;选择＆＃34;到我点击的div并将按钮的内部html更改为clicked 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生成的，因此我在页面中发布了一个示例＆＃39;来源

<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'));
        }
    });
 });

Answer 2

您可以尝试捕获双击事件并阻止启动上一个功能。

$(".panel-kol").on("dblclick", function(e){
    e.preventDefault();  
    return;
});

jQuery选择div问题

2 个答案: