Question

你能帮我解决这个问题吗？

使用Javascript：

$(document).ready(function(){
    $(".tile a").click(function() {
        $(this).closest("div").toggleClass("selected_tile");
        if($(this).parent().parent().hasClass("col-md-4")){
            $(this).parent().parent().toggleClass("col-md-4 col-md-12");    
        }
        if($(this).parent().parent().hasClass("col-md-6")){
            $(this).parent().parent().toggleClass("col-md-6 col-md-12");    
        }
        if($(this).parent().parent().hasClass("col-md-8")){
            $(this).parent().parent().toggleClass("col-md-8 col-md-12");    
        }
    });         
});

HTML：

<div class="col-md-6">
    <div class="tile">
        <a href="#">web</a>
        <div class="project_info"></div>
    </div>
</div>

我只需要在父类已经有类的情况下切换类，否则什么也不做。

Answer 1

你需要以某种方式存储旧类，否则它会丢失。

这将把旧班级存储在＆＃34; data-old-class＆＃34;并切换你的新班级：

JS：

jQuery('.nlp_day_selected').click(function () {
    var htmlString = '';
    var $hidden = $(this).find('.hidden_info');
    $hidden.each(function () {
        var $el = $(this),
            time = $el.prev().text(),// time is in previous element
            title = $el.find('.hidden_title').text(),// title is a child
            description = $el.find('.hidden_description').text();// description is a child

        htmlString += time + ' ' + title + ' ' + description + '<br>';
    });    

    $('#nlp_show_content').html(htmlString);
});

Fiddle

Answer 2

想出这个，并有几件事要解决，以使其工作。第一步是组织变量和方法调用，以提高效率和可读性，如下所示：

...
var $this = $(this),
            grandparent = $this.parent().parent(),
            cl_4 = "col-md-4", 
            cl_6 = "col-md-6", 
            cl_8 = "col-md-8",
            cl_12 = "col-md-12";
...

这为我们节省了大量的函数调用和大量的DOM查找，这些查询很昂贵。它还为我们节省了大量的重复，使得更容易跟踪选择中的错误，并允许我们更好地阅读代码。

它的第二件事就是从.toggleClass()删除一个参数，像这样（注意变量而不是字符串。看起来很整洁，没有？）：

...
if(grandparent.hasClass(cl_4)){
    grandparent.toggleClass(cl_12);    
}
...

.toggleClass只接受一个类作为其参数，从我可以阅读的内容来看，在给定.col-md-6的示例中，不应该需要切换第一个类。如果有，我相信你可以找到一种方法。

通过这些更改，您的代码应该可以正常工作。

编辑：由于所有情况（cl_4，cl_6，cl_8）似乎切换cl_12，您可以使用OR：s将条件减少为单个if ()。

EDIT2：错误解释了OP，并没有看到你想按照指示更换.col-md-12的原始类。但是，除非发生奇怪的事情，否则不应该删除原始类（cl_4 / 6/8），因为cl_12应该优先放在原始类之后。

Answer 3

首先，您需要在删除之前存储旧类，以便您知道稍后要更改的类。您还可以将$(this).parent().parent()保存在变量中以提高可读性，并避免sxefloden指出的不必要的DOM查找。

你可以这样做：

$(".tile a").click(function () {
    $(this).closest("div").toggleClass("selected_tile");
    var mdClass, 
        grandParent = $(this).parent().parent();

    if (grandParent.hasClass("col-md-12")) {
        mdClass = grandParent.data("previous-class");
    } else {
        mdClass = grandParent[0].className.match(/\bcol-md-\d\b/);
        grandParent.data("previous-class", mdClass);
    }

    grandParent.toggleClass(mdClass + " col-md-12");
});

Fiddle

if .parent（）。hasClass然后.parent（）。toggleClass

使用Javascript：

HTML：

3 个答案: