1

説明が下手ですが、こんな感じです。

ユーザーがリンクをクリックしたときにトリガーされるカスタム アコーディオン スクリプトがあります。各ページには複数のアコーディオンがあり、それぞれに独自のリンクがあります。このスクリプトは完全に機能し、各リンクは正しいアコーディオンを開くだけです。

ここで、このスクリプトを変更して、コンテンツを AJAX 経由でアコーディオン内の div にロードする必要があります。AJAX をロードしていますが、1 つの DIV にロードするのではなく、同じクラスのすべての DIV にロードしています。これを行う理由は理解できますが、既存のスクリプトと結び付ける方法がわかりません。同じボタンを使用してコンテンツをロードするので、かなり簡単です。

アコーディオン スクリプトはdata-target属性を使用して開くアコーディオンを指定するため、新しいスクリプトに関連付けることができるはずですが、私の人生ではわかりません。

これが私がこれまでに持っているものです：

HTML リンク:

<a class="button maximize accordionHeading" data-target="firstAccordion" href="/Load/?ID=1">More Info</a>

HTML div:

<div class="accordionHidden firstAccordion">
    <div class="row" style="margin-top:10px;">
        <div class="six columns">
            <img class="load-image" src="images/dirt.jpg" />
        </div><!--/.six.columns-->
        <div class="six columns load-description">
            <!-- this is where the content should be loading -->
        </div><!--/.six.columns-->
    </div><!--/.row-->
</div><!--/.accordionHidden firstAccordion-->

脚本：

$("a.accordionHeading").bind("click", function(e){
    e.preventDefault();
    $("."+$(this).data("target")).slideToggle();
    $(this).addClass("minimize");
    if ($(this).text() == "More Info") {
       $(this).text("Less Info");
       $(this).removeClass("maximize").addClass("minimize");
    } else {
        $(this).addClass("maximize").removeClass("minimize").text("More Info");
    }

    // this is what I'm trying to add.
    var $loadID = $(this).attr("href");
    $(".load-description").load($loadID);

});
4

1 に答える 1

1

アンカーに基づいてdata-target、クラス名でターゲット div を選択できます。次のことを試してください。

var $loadID = $(this).attr("href");
var tgt = $(this).data('target')
$("." + tgt + " .load-description").load($loadID);
于 2012-08-01T20:13:39.757 に答える