jQuery选择div问题[关闭]

Posted 2021-03-29

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

我有一个功能，将“选择”类添加到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生成的，因此我从页面'source'发布了一个示例

<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>

任何帮助将不胜感激！

答案

只需将它放在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'));
        }
    });
 });

另一答案

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

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