Question

我正在尝试选择一个特定的类（在本例中为page1，page2，page3等）。

我已经编写了这个适用于单个课程的代码，我尝试使用.match()排除.plink中获取的dis课程，但无法获得该课程工作

$(function(){
    $("a.plink").click(function() {
        var dis = $(this).attr("class");    // This is the problem line, I need it to contain 'page1' ONLY. Not 'page1 plink'.
        $("#page1,#page2,#page3").hide();
        $("#" + dis).show();
        return false;
    });
});

与此相关的HTML是：

<div id="page-links">
    <a class="page1 plink" href="#">About</a>
    <a class="page2 plink" href="#">History</a>
    <a class="page3 plink" href="#">Backstage</a>
</div>

编辑：

这些是显示和隐藏的DIV：

<div id="page1">
    <?php include_once("page1.php");?>
</div>
<div id="page2">
    <?php include_once("page2.php");?>
</div>
<div id="page3">
    <?php include_once("page3.php");?>
</div>

有没有一种简单的方法可以在没有正则表达式匹配的情况下实现这一目标？

Answer 1

$(function(){
    var pages = $('div[id^=page]');
    $("a.plink").click(function() {
        var dis = $(this).attr("class").replace(' plink', '');
        pages.hide().filter('#' + dis).show();
        return false;
    });
});

Answer 2

这应该是

$("." + dis).show();

用于类，在您的示例中，有所有类。

正如你提到的简单方法所以它可能是

$("a.plink").click(function() {
    $(".plink").hide();
    $(this).show();
    return false;
});

根据编辑后的问题

$("a.plink").click(function() {
    $('div[id^="page"]').not('#page-links').hide();
    pid=$(this).attr('class').split(' ')[0];
    $('#'+pid).show();
    return false;
});

Here是一个小提琴。

Answer 3

您正尝试通过附加类来关联点击的功能。将你想要显示的div的id放在href

中会更有意义

HTML：

<div id="page-links">
        <a class="plink" href="#page1">About</a>
        <a class="plink" href="#page2">History</a>
        <a class=" plink" href="#page3">Backstage</a>
</div>
<div id="page1">
    Content 1
</div>
<div id="page2">
    Content 2
</div>
<div id="page3">
    Content 3
</div>

的javascript：

jQuery(function ($) {
    var pages = [];
    function showPage(page) {
        var i;
        for(i = 0; i < pages.length; i++)
        {
            if(page === pages[i]) {
                $(pages[i]).show();
            } else {
                $(pages[i]).hide();                       
            }
        }            
    }

    // Store each href in a pages array and add handlers
    $('.plink').each( function() {
       var page = $(this).attr('href');
       pages.push(page);
       $(this).attr('href', '#');
       $(this).click(function () {  
           showPage(page);
       });
    });

    // show the first page
    if(pages.length > 0) {
       showPage(pages[0]);
    }
});

示例：

http://jsfiddle.net/38qLB/

这样我就不会回避实际的问题，即如何从多类元素中选择一个类，如果你真的坚持的话，你应该按照这个分割类名Get class list for element with jQuery的例子进行操作使用类来建立你的链接/ div关联

Answer 4

JavaScript代码不正确。使用“＃”，您可以从html元素中选择ID。由于你只有课程，正确的方法是“。”

所以这是正确的：

$(function(){
  $("a.plink").click(function() {
     var dis = $(this).attr("class");
    $(".page1,.page2,.page3").hide();
    $("." + dis).show();
    return false;
  });
});

我没有测试它，但我认为你必须用var dis改变一些东西。

如果单击.page1，变量dis将包含“page1 plink”。

$("." + dis).show();

将是

$(".page1 plink").show();

所以我建议拆分这两个类，因为它应该像

 $(".page1 .plink").show();

Answer 5

你真的不想排除plink类，因为当你需要添加另一个类时，这会给你带来困惑和麻烦。相反，您只想提取pageX类：

// Regex for extracting pageXX
var reg = /^(.*\s)?(page\d+)([^\d].*)?$/;
dis = reg.exec(dis)[2];

我没有100％测试这个，但是在var dis = $(this).attr("class");之后把这两行放在了正确的位置，你应该好好去。

Answer 6

我不知道我的问题是否正确

使用类plink获取所有类可以使用

var klasses $("a.plink");

现在你可以循环真实的项目

var yourClasses = Array();
for(var klass in klasses)
{
  var word = klass.attr('class').replace(" plink", "");
  yourClasses.push(word);
}

现在你拥有了所有类plink的类

希望这是你寻找的地方

Answer 7

如果我只是做一个小调整来修复你现有的结构，我会做这样的事情：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $.trim(this.className.replace('plink', ''));

        /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
        $('div.page').hide(); 

        /*otherwise use the version from sheikh*/
        //$('div[id^="page"]').not('#page-links').hide();

        $('div#' + id).show();
    });
});

我建议您对现有标记的主要更改是为每个页面div添加一个通用的“页面”类。这是fiddle

如果我从头开始，我可能会采用一种稍微不同的方法来定义一个“活动”类并切换哪些元素，而不是在div上使用show / hide。这最终会看起来像这样：

标记：

<div id="page-links">     
    <a class="plink active" href="#page1">About</a>
    <a class="plink" href="#page2">History</a>
    <a class="plink" href="#page3">Backstage</a> 
</div> 
<div id="page1" class='page active'> </div> 
<div id="page2" class='page'> </div> 
<div id="page3" class='page'> </div>

CSS：

div.page
{
    height: 300px;
    display:none;
}
div.page.active
{
    display:block;
}
a.plink
{
    padding-left:5px;
    padding-right:5px;
}
a.plink.active
{
    background-color:#ddd;
}
div#page1
{
    background-color:blue;
}
div#page2
{
    background-color:green;
}
div#page3
{
    background-color:red;
}

脚本：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $(this).attr('href');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('div' + id).addClass('active');
    });
});

或小提琴here。

哦，回答标题问题，而不仅仅是描述的最终行为......

var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
    if(classes[i].substring(4) === classes[i].replace('page', '')) {
        id = classes[i];
        break;
    }
}

应该以{{1}}结尾，其中包含与点击的链接相关联的“page＃”值，无论其在类列表中的位置如何。

从多类元素中选择一个类

7 个答案: