Сочетание утверждений JQuery

Question

Я задавался вопросом, может ли кто-нибудь помочь мне!

У меня есть два отдельных оператора jQuery на моем сайте, которые в основном действуют на div, который при нажатии на него будет расширять зону содержимого, которая скрыта отрицательным полем справа от экрана.

Что я хочу сделать, так это наличие нескольких элементов на каждой странице, но я хочу, чтобы что-то было максимально упорядочено, где мне не нужно добавлять все новое утверждение для каждого элемента!

Вот ссылка на веб-сайт в вопросе (элементы находятся справа - один со знаком плюс, ниже другой иконкой Twitter)

Sandbanks Property

Ниже приведен код, у меня есть :

// Настройка функции:

function extraOn() { 
var w = $('.homeplus-expanded').width(); 
$('.homeplus-expanded').animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
} 


function extraOff() { 
var ws = $('.homeplus-expanded').innerWidth(); 
$('.homeplus-expanded').animate({ 
    right : '0', 
    'margin-right':-ws 
    },'fast'); 
} 



function shareOn() { 
var w = $('.homeplus-expanded').width(); 
$('.shareplus-expanded').animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
} 


function shareOff() { 
var sp = $('.shareplus-expanded').innerWidth(); 
$('.shareplus-expanded').animate({ 
    right : '0', 
    'margin-right':-sp 
    },'fast'); 
} 

// и затем вызвать эти функции OnClick:

$('.homeplus').click(function(){ 
extraOn(); 
}); 


$('.homeplus-expanded span.close').click(function(){ 
extraOff(); 
    }); 

$('.shareplus').click(function(){ 
shareOn(); 
}); 


$('.shareplus-expanded span.close').click(function(){ 
shareOff(); 
    }); 

Как вы можете видеть, я уверен, что есть некоторые кресты над и некоторыми возможностями для создания коды много аккуратнее и более модульного ....

Спасибо за любую помощь вы можете предоставить .. .

Answer 1

Вам необходимо реорганизовать дубликат кода и перевести его в режим работы. Затем передайте соответствующий обработчик функции привязки события click. Поскольку функция события привязанного щелчка находится в области функций, она видна событию клика. Попробуйте сделать больше рефакторинга для своего кода :). Рефакторинг кода является забавным, и реорганизованный код может использоваться повторно и упрощен для обслуживания.

Упрощенная версия, как показано ниже.

function InitContentZone(turnOnElement, turnOffElement, expandElement) 
{ 
    var expandEle = expandElement; 
    function extraOn() { 
     $(expandEle).animate ({ 
      right : '0', 
      'margin-right':'0px' 
     }, 'fast'); 
    } 

    function extraOff() { 
     var ws = $(expandEle).innerWidth(); 
     $(expandEle).animate ({ 
      right : '0', 
      'margin-right':-ws 
     }, 'fast'); 
    } 

    $(turnOnElement).click(extraOn); 
    $(turnOffElement).click(extraOff); 
} 

$(document).ready(function() 
{ 
    InitContentZone('.homeplus', '.homeplus-expanded span.close', '.homeplus-expanded'); 
    InitContentZone('.shareplus', '.shareplus-expanded span.close', '.shareplus-expanded'); 
}); 

Answer 2

использовать одну функцию, которая использует селектор $(this), и вызывать его из обработчиков событий click. Так, например:

function turnOn() { 
    var w = $(this).width(); 
    $(this).animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
} 

Answer 3

Вы можете передать ссылку на элемент, который был кликнули на «extraOn» и другие функции, а затем использовать эту ссылку в качестве селектора JQuery

// Call it like this 
extraOn(this); 

function extraOn(elem) { 
    var w = $(elem).width(); // No idea what this is for 
    $(elem).animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
    } 
} 

Или вы можете использовать содержание extraOn функции в качестве фактического обратного вызова, таким образом вы можете также использовать событие, например, так:

$('.homeplus').click(function (ev) { 
    ev.preventDefault(); // if it is a <a> element or has some other default behaviour 
    var w = $(this).width(); // No idea what this is for 
    $(this).animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
    } 
}); 

Если вы ждете, чтобы загрузить эти элементы через AJAX, вы можете предпочесть использовать DefErr ed:

$(document).on('click','.homeplus',function (ev) { 
    ev.preventDefault(); // if it is a <a> element or has some other default behaviour 
    var w = $(this).width(); // No idea what this is for 
    $(this).animate ({ 
    right : '0', 
    'margin-right':'0px' 
    }, 'fast'); 
    } 
});