Question

我有以下HTML

<a class="btn btndialog-save" href="#">Save</a>
<a class="btn btndialog-delete" href="#">Delete</a>
<a class="btn btndialog-whatever"href="#">Whatever</a>

<p></p>

点击后，我希望能够获得班级名称部分后跟连字符（ - ），我试图按照以下方式进行，但不能正常工作

$(document).ready(function(){
    $("a[class|='btndialog']").on('click', function(){
        var $dialog = this.className.match(/btndialog-/)[1];
        $("p").text($dialog);
    });
});

有人可以告诉我哪里出错了吗？

https://jsfiddle.net/tc31ru50/

Answer 1

试试这个：

$(document).ready(function(){
    $("a[class|='btn btndialog']").on('click', function(){      
        var index = this.className.indexOf('-');
        if(index) {
          $("p").text(this.className.substring(index+1));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="btn btndialog-save" href="#">Save</a>
<a class="btn btndialog-delete" href="#">Delete</a>
<a class="btn btndialog-whatever"href="#">Whatever</a>

<p></p>

注意：参考 - http://api.jquery.com/category/selectors/

Attribute Contains Prefix Selector [name|=”value”]

选择具有指定属性的元素，其值等于给定字符串或以该字符串后跟连字符（ - ）开头。

如果您想使用通用选择器，请尝试：

$(document).ready(function(){
    $(".btn").on('click', function(){      
        var index = this.className.indexOf('-');
        if(index) {
          $("p").text(this.className.substring(index+1));
        }
    });
});

如果您正在寻找中间的任何类名，请尝试以下：

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

Answer 2

与这样复杂的选择器合作并不是一个好主意。它可能会影响性能并使您的jQuery代码不可读。

你可以简单地做到：

<a class="btn btndialog btndialog-save" href="#">Save</a>
<a class="btn btndialog btndialog-delete" href="#">Delete</a>
<a class="btn btndialog btndialog-whatever"href="#">Whatever</a>

它的可读性或可支持性并没有恶化，但现在你可以这样做：

$(".btndialog")

此外，您现在可以应用常见的CSS样式逻辑，如＆＃34;所有btndialogs应该使用另一种字体＆＃34; - 在一行CSS中完成。

这是大多数插件和CSS框架实际上做的事情例如，bootstrap有：

btn btn-default
modal modal-sm
alert alert-success
glyphicon glyphicon-ok

Answer 3

这样可行，但可能有更好的方法来完成您的需要：

Get-ChildItem -Filter "*_*" | Foreach-Object { Rename-Item -Path $_.Name -NewName $_.Name.Replace("_", "") -WhatIf }

小提琴http://jsfiddle.net/mjh8kysx/

Answer 4

只需将班级class="btn btndialog-save"的顺序更改为class="btndialog-save btn" ..否则请将其他课程和申请事件应用于此... $('.specific-class').click

<a class="btndialog-save btn" href="#">Save</a>
<a class="btndialog-delete btn" href="#">Delete</a>
<a class="btndialog-whatever btn"href="#">Whatever</a>

<p></p>

$(document).ready(function(){
    $("a[class|='btndialog']").on('click', function(){
        var $dialog = this.className.match(/btndialog-/)[1];
        $("p").text($dialog);
    });
});

更好地采用特定课程并应用点击事件。

jQuery：无法选择以字符串后跟连字符开头的类名

4 个答案: