javascript - Jquery 我需要应用具有不同特征的相同函数

Question

我需要的是应用一个 jquery 函数的三个元素，但具有不同的功能，如淡入/淡出、FB.XFBML.parse 等。我试图搁置函数不起作用，我知道我正在做一些事情错了，你能帮帮我吗？

这是 jQuery 代码:

function load(div, of) {
    $(div).load(of, function() {    
        FB.XFBML.parse(document.getElementById('div-d'));
        twttr.widgets.load();
    }).hide().fadeIn("slow");    
}

$.getScript("jquery.cycle.all.js", function(data, textStatus, jqxhr) {
    console.log(data); // Data returned
    console.log(textStatus); // Success
    console.log(jqxhr.status); // 200
    console.log("Load was performed.");
});

options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
});

$(document).ready(function(){
    $("#Reload").click(function() {
        $("#result").html("result reloaded successfully");
    });
});

按钮 1:

<a href="#inicio" onClick="load('.div-d','road.php')" class="temas-deco-d">ROAD</a>

按钮 2:

<a href="#inicio" onClick="load('.div-d','street.php')" class="temas-deco-d">STREET</a>

按钮3:

<a href="#inicio" onClick="load('.div-d','house.php')" class="temas-deco-d">house</a>

按钮 1 想要加载没有 FB.XFBML.parse 的 div。

两个按钮想要加载没有淡入淡出效果

的div

我想要按钮三加载脚本 jquery.cycle.all.js

用代码 brian 编辑:

脚本:

     function load(div, of)
{
     $(div).load(of, function() {
});  
}
$('.botones-lateral-j').click(function () {
    var $this = $(this) // cache jquery `this` object so we don't need to reinstantiate it every time we use it

    var script = $this.data('script');
    var target = $this.data('target');
    var button = $this.data('button');

    console.log(script, target, button); // log data to make sure it's correct, remove before deployment

    switch (button) {
        case 'lateral':
            $(target).load(of, function() {    
               twttr.widgets.load();
            }).hide().fadeIn("slow"); 
            break;
        case 'button2':
            $(target).load(of, function() {    
               FB.XFBML.parse(document.getElementById('div-d'));
               twttr.widgets.load();
            }).hide();
            break;
        case 'button3':
            $.getScript("jquery.cycle.all.js", function(data, textStatus, jqxhr) {
                console.log(data); // Data returned
                console.log(textStatus); // Success
                console.log(jqxhr.status); // 200
                console.log("Load was performed.");
            });
        break;
    }
});

按钮:

<a href="#inicio" class="botones-lateral-j" data-script="<?php $_SERVER['DOCUMENT_ROOT']?>/dis/lateral-2.php" data-target="#lateral" data-button="lateral1">SIG</a>

我尝试了淡入淡出效果，看看它是否删除了数据按钮 lateral1它不起作用，甚至不更改 div :(

Answer 1

编辑 - 包括事件监听器并使用 data-* 属性而不是开关中的脚本。

HTML:

<a href="#inicio" class="temas-deco-d" data-script="road.php" data-target=".div-d" data-button="button1">ROAD</a>
<a href="#inicio" class="temas-deco-d" data-script="street.php" data-target=".div-d" data-button="button2">STREET</a>
<a href="#inicio" class="temas-deco-d" data-script="house.php" data-target=".div-d" data-button="button3">HOUSE</a>

JS:

$('.temas-deco-d').click(function () {
    var $this = $(this) // cache jquery `this` object so we don't need to reinstantiate it every time we use it

    var script = $this.data('script');
    var target = $this.data('target');
    var button = $this.data('button');

    console.log(script, target, button); // log data to make sure it's correct, remove before deployment

    switch (button) {
        case 'button1':
            $(target).load(script, function() {    
               twttr.widgets.load();
            }).hide().fadeIn("slow"); 
            break;
        case 'button2':
            $(target).load(script, function() {    
               FB.XFBML.parse(document.getElementById('div-d'));
               twttr.widgets.load();
            }).hide();
            break;
        case 'button3':
            $.getScript("jquery.cycle.all.js", function(data, textStatus, jqxhr) {
                console.log(data); // Data returned
                console.log(textStatus); // Success
                console.log(jqxhr.status); // 200
                console.log("Load was performed.");
            });
        break;
    }
});