jQuery双击事件显示带有聚合数据的弹出窗口？

问题描述

在jQuery中双击事件时如何显示弹出窗口以及汇总数据？我使用下面的代码获取汇总数据，每个quessionId有许多相关的reasons。当我单击/选择QuestionId按钮/事件时，OnClick选择questionId，然后双击以删除/取消，当OnClick选择一个questionId时，如果Double-click，则字典的相关原因将显示在questionId下方删除该questionId，然后在“弹出窗口”中显示词典的相关原因，如下图所示（用户可以在5秒钟后单击“已确认”按钮秒，一经确认，就会自动关闭弹出窗口。

下面是我在jQuery中.js代码的部分代码，所有相关数据都可以通过下面的代码找到：

function fmtQuestionsByID(id,callback){
    if(!DATA.questions[id] || !$('#card_'+id) )return;
    var project = DATA.projects[DATA.questions[id].projectId];
    if(!project)return;
    
    var issueQuestionLists = DATA.alltags.reduce(function(a,b){
        if(a[b['quessionId']]) {
            a[b['quessionId']].push({name:b['name'],color:b['color'],description:b['description'],reason:b['reason'],question:b['question'],issueId:b['issueId'],department:b['department'],_id:b['quessionId']})
        } else{
            a[b['quessionId']] = [{name:b['name'],_id:b['quessionId']}]
        }
        return a;
    },{});
    var d = 0;
    for(var i=0;i < DATA.questions[id].tags.length;i++){
        var lid = DATA.questions[id].tags[i];

        for(var l in issueQuestionLists){
            var lb = issueQuestionLists[l]
            for(var c=0;c< lb.length;c++){
                var lc = lb[c];
                if(lc._id == lid){
                    d++;
                    var info = lc;
                    console.log('info',info);
                    $('.tags_question').append(d + '['+info.name+']' + info.description + '。' +  'Reason: '+info.reason+ '。' ||'[no data]' );
                }
            }

        }
    }
}

在代码下面，单击以选择OnClick，然后双击以删除。

function _fmtQuetionTags(){
    fmtUsers( DATA.lastShowID,function(html){
        html = '<span class="add_plus_pic question projectinfo_addquestion" title="" href="#" aria-label=""><i class="fa fa-plus"></i></span>' + html;
        $('#projectinfoUsers').html( html );

        $('#projectinfoUsers .js-question').attr('title','Double-click remove question').unbind().on('dblclick',function(){
            var id = $(this).data('id');
            doSubmitSetQuestion(DATA.questionid,DATA.lastID,id,function () {
            });
        });
    });
}

我使用下面的html来获取上面的数据

<div id="questioninfo">
    <span class="tags_question"></span>
</div>

解决方法

根据您的描述，我创建了以下示例代码。

$(function() {
  $("#showAlert").click(function() {
    $(".alert.dialog").show("fast",function() {
      setTimeout(function() {
        $(".alert.dialog button[disabled]").prop("disabled",false);
      },5000);
    });
  });
  $(".ok.btn").click(function() {
    $(this).closest(".dialog").hide("fast",function() {
      $(".ok",this).prop("disabled",true);
    });
  });
  $(".dialog li").click(function() {
    $(this).removeClass("marked").addClass("selected");
  }).dblclick(function() {
    $(this).removeClass("selected").addClass("marked");
  })
});

.alert {
  width: 340px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0;
  display: none;
}

.title {
  width: 100%;
  background: #eee;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-top: 6px;
  padding-bottom: 6px;
}

.response {
  width: 95%;
  margin-top: 10px;
  padding-left: 6px;
}

.button-set {
  width: 100%;
  margin: 5px;
  text-align: center;
}

.button-set .default {
  font-weight: bold;
}

.selected {
  background-color: #FF0;
}

.marked {
  background-color: #F00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="showAlert">Alert</button>
<div class="alert dialog">
  <div class="title">Alert 1</div>
  <div class="response">This is an alert description
    <ul>
      <li>Option 1</li>
    </ul>
  </div>
  <div class="button-set">
    <button class="ok btn default" disabled="disabled">Okay</button>
  </div>
</div>

希望这与您正在执行的操作以及要实现的功能类型相似。本示例使用各种方法.click()和.dblclick()。它还在setTimeout()的回调中使用.show()。

查看更多：

javascript

jQuery双击事件显示带有聚合数据的弹出窗口？

问题描述

解决方法

相关问答