Question

我只是想简化我的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的了解很差，我找不到谷歌的答案。有没有办法实现这个目标？

提前致谢，塞尔吉奥

Answer 1

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

    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类，然后将该对话框存储在另一个属性中（例如，＆＃39; data-dialog＆＃39;）;这使代码变得更加简单。

Answer 2

看看the selectors you can use。特别是contains。

所以基本上找到所有将“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')
  }
});

使用Jquery打开特定类的对话框

2 个答案: