Кликабельный значок расширение/сворачивание содержимого


Основная идея кодекса заключается в том, что у меня + или - значок (".триггер"), который выберите-могут и развернуть или свернуть содержимое (".продолжение") сразу после него (там много есть развернуть/свернуть пары). У меня тоже пролет("#expandAll"), которая, когда щелкнуто, развернуть или свернуть каждый блок.

Пожалуйста, ознакомьтесь с моим первым использованием jQuery и помоги мне сунуть голову в другое государство на jQuery. Где может код быть улучшено? Есть ли проблемы с ним? Есть ли лучший способ сделать это?

(Честно говоря, я понятия не имею, что $() функция на самом деле делает.)

var expandAll = function () {
    $(".cont").removeClass("hid");
    $("#expandAll").html("Colapse All");
    $("#expandAll").unbind("click", expandAll);
    $(".trigger").html("-");
    $("#expandAll").click(colapseAll);
}
var colapseAll = function () {
    $(".cont").addClass("hid");
    $("#expandAll").html("Expand All");
    $("#expandAll").unbind("click", colapseAll);
    $(".trigger").html("+");
    $("#expandAll").click(expandAll);
}
$(document).ready(function () {
    $(".trigger").click(function (event) {
        $this = $(this);
        $this.html($this.text() == '+' ? '-' : '+');
        $($this.nextAll(".cont").get(0)).toggleClass("hid");
    });
    $("#expandAll").click(expandAll);
});

Пожалуйста, дайте мне знать, если вам нужно больше/меньше информация.



1546
13
задан 17 февраля 2011 в 09:02 Источник Поделиться
Комментарии
2 ответа

Я рефакторинг кода и добавил комментарии, чтобы объяснить определенные вещи.

// We can shorten this from document.ready(...) to $(...) 
// Internally, jQuery will add the passed in function to a list
// of handlers that will be invoked when the document is ready.
$(function() {
// Since the $ function will query the document with the
// specified selector we want to cache these.
// Doing this from within the ready callback allows us
// to keep these references hidden.
// I've also added the 2 function variables to keep them
// hidden as well.
var expandAll, colapseAll,
expandAllElement = $("#expandAll"),
contElements = $(".cont"),
triggerElements = $(".trigger");

expandAll = function() {
contElements.removeClass("hid");
triggerElements.html("-");
// Notice how we can chain these calls together?
// jQuery was designed with a fluent interface.
expandAllElement.html("Colapse All").one("click", colapseAll);
};

colapseAll = function() {
contElements.addClass("hid");
triggerElements.html("+");
expandAllElement.html("Expand All").one("click", expandAll);
};

triggerElements.click(function(event) {
// Always define a variable so the 'name'
// is not defined in the global object,
var $this = $(this);
$this.html($this.text() == '+' ? '-' : '+');
$($this.nextAll(".cont").get(0)).toggleClass("hid");
});

// Using the one function allows you to skip
// unbinding the event handler for each click.
expandAllElement.one("click", expandAll);
});

14
ответ дан 17 февраля 2011 в 09:02 Источник Поделиться

// If you use selectors multiple times, always cache them into variables, else jQuery has to search for them multiple times.
var $cont = $('.cont'),
$expandAll = $('#expandAll'),
$trigger = $('.trigger');

function expandAll() {
$cont.removeClass('hid');
$trigger.text('-');
// Use .text() instead of .html().
// You can chain these calls together.
// If you use .one(), you don't have to unbind the previous event handler next time, jQuery does it for you.
$expandAll.text('Collapse All').one('click', collapseAll);
}
function collapseAll() {
$cont.addClass('hid');
$trigger.text('-');
$expandAll.text('Expand All').one('click', expandAll);
}

// You can pass a function to jQuery itself – it's a shorthand for $(document).ready().
$(function() {
// There's no need to pass the event argument, because
// 1. You didn't use it there
// 2. jQuery “normalizes” the event object, so you don't have to pass it as an argument. If you want a shorthand for it, do it inside the function:
// var e = event;
$trigger.click(function() {
// Always use var to declare variables, to prevent polluting the global scope.
var $this = $(this);
// Again: use .text() instead of .html().
$this.text($this.text() == '+' ? '-' : '+');
// There's no need to do this:
// $($this.nextAll(".cont").get(0)).toggleClass("hid");
// You can simply do this:
$this.nextAll('.cont').toggleClass('hid');
});
$expandAll.one('click', expandAll);
});

2
ответ дан 20 февраля 2011 в 07:02 Источник Поделиться