Question

我有一个按钮列表以及我想在单击每个按钮时显示的相应对话框消息。

我有以下HTML：

<a class="btn dialogbtn dialogbtn-save" href="#">Save</a>
<a class="btn dialogbtn dialogbtn-delete" href="#">Delete</a>

<div class="dialogstack">
  <div class="dialog-save">
    <p class="header">Save Header Text</p>
    <p class="message">Save Message Text</p>
    <p class="footer">
      <span>OK</span>
    </p>
  </div>
  <div class="dialog-delete">
    <p class="header">Delete Header Text</p>
    <p class="message">Delete Message Text</p>
    <p class="footer">
      <span>Save</span>
      <span>Cancel</span>
    </p>
  </div>
</div>

单击按钮并显示相关消息时，我尝试匹配“保存”和“删除”部分。

$(document).ready(function(){
    var dialogMessages = $("[class|='dialog']");

    $(".dialogbtn").on('click', function(){            
        var index = this.className.indexOf('-');
        if(index) {
          var dd = this.className.substring(index+1);
          var lastIndex = dd.indexOf(' ');
          var dialogFunction = dd.substring(0,(lastIndex>0)?lastIndex:dd.length);
        }

        if(dialogMessages.hasClass('dialog-'+dialogFunction)){
            var currentDialog = dialogMessages.find('.dialog-'+dialogFunction);
            alert($(currentDialog).find('p').text()); //This doesn't work
        }
    });
});

我无法访问存储在jquery对象中的HTML。我该如何解决这个问题？

http://jsfiddle.net/gynh4nwb/

Answer 1

尝试使用此功能从div打印/提醒HTML。

$(document).ready(function(){
        var dialogMessages = $("[class|='dialog']");

        $(".dialogbtn").on('click', function(){            
            var index = this.className.indexOf('-');
            var dd = this.className.substring(index+1);             

                alert($(".dialog-"+dd).html()); //This doesn't work

    }); });

https://jsfiddle.net/rohitbatta/gynh4nwb/3/

Answer 2

我真的希望我能告诉你为什么会这样，但我实际上并不知道。

如果用过滤器替换find，它可以正常工作。

$(document).ready(function(){
    var dialogMessages = $("[class|='dialog']");

    $(".dialogbtn").on('click', function(){            
        var index = this.className.indexOf('-');
        if(index) {
          var dd = this.className.substring(index+1);
          var lastIndex = dd.indexOf(' ');
          var dialogFunction = dd.substring(0,(lastIndex>0)?lastIndex:dd.length);
        }

        if(dialogMessages.hasClass('dialog-'+dialogFunction)){
            var currentDialog = dialogMessages.filter('.dialog-'+dialogFunction);
            alert($(currentDialog).find('p').text());
        }
    });
});

Link to jsFiddle

如果将dialogMessages定义为：

，那么您的代码可以使用find工作，这真的很奇怪

var dialogMessages = $('div');

如何访问存储在jquery对象中的HTML？

2 个答案: