0

我只是想简化我的 Jquery 代码。我有下一个代码：

jQuery( '.audioEnhancedHelp-opener' ).click(function() {
    jQuery( '.audioEnhancedHelp').dialog( 'open' );
});
jQuery( '.narrationHelp-opener' ).click(function() {
    jQuery( '.narrationHelp' ).dialog( 'open' );
});
jQuery( '.studentcodeHelp-opener' ).click(function() {
    jQuery( '.studentCodeHelp' ).dialog( 'open' );
});

并希望为每个具有特定类型“*Help-opener”类型的按钮使用通用标签来打开特定对话框。像这样的东西：

jQuery( '.LABELHelp-opener' ).click(function() {
    jQuery( '.LABELHelp' ).dialog( 'open' );
});

我对 Jquery 的了解很差，我在谷歌上找不到答案。有没有办法做到这一点？

在此先感谢，塞尔吉奥

4

2 回答 2

0

看看您可以使用的选择器。尤其是包含。

所以基本上找到所有具有“Help-opener”作为类的元素。然后你需要分解类“studentcodeHelp-opener”，用“-”作为分隔符。然后您可以获取“studentcodeHelp”名称。

但是，我建议将目标放在另一个属性中，例如data-target这将简化解析位。例子：

<div class="Help-opener studentcodeHelp-opener" data-target="studentcodeHelp"> [... ] </div>
<div class="Help-opener narrationHelp-opener" data-target="narrationHelp"> [... ] </div>

然后是那个的JS：

$(function() {
  $('div.Help-opener').click(function() {
    $('.' + $(this).attr('data-target')).dialog('open')
  }
});
于 2013-07-01T12:02:57.103 回答
0

我认为这符合您的基本要求：

    jQuery('*[class *= "Help-opener"]' ).click(function() {
        var cssClass = $(this).attr("class");
        var helper = cssClass.substring(0, cssClass.length-11);
        jQuery( '.' + helper + 'Help').dialog('open');
    });

请注意，这不会处理针对您单击的元素有多个类的情况。您可能需要考虑使用特定于此类按钮的 CSS 类，然后将对话框存储在另一个属性中（例如，'data-dialog'）；这使代码变得更加简单。

于 2013-07-01T11:59:02.867 回答