1

編集:リストされたJavascriptが完全に削除され、ドロップダウンメニューが<div>'s内<li>の'sとしてスタイル変更され、最後のdivがJavascript onclickイベントによって生成された場合、アプローチははるかに簡単になりますか?例えば

    <a id="click_link">click me</a>

       $("#click_link").click(function(){
       $('#div').load('http://www.link.com/');
    });

いずれにせよ、目前の問題...

エレガントな外観のJavaScriptソリューションを使用するという私の決定は、JavaScriptに関しては私の膨大な経験不足を浮き彫りにしています。問題は、一見すると単純です...

各ドロップダウンメニューでオプションを選択したら、特定のボタンを表示できるように、最後のdivをロードする必要があります(指定されたオプションでアイテムを購入するためのリンク、たとえばネックレスD、ストーンオプションB、および配信オプションA=「購入」ボタン#17でdivをロード)

ドロップダウンは、Javascriptを介して入力およびスタイル設定されるdivであり(より単純なメソッドを使用するのではなく<form><input>、オプションごとに異なるスタイルのテキストを2行追加する柔軟性を提供します。未知であり、私の経験不足が輝いています。

孤立したセクションは、ここでそのエンティティで見ることができます

わかりました、コードに。これがJavascriptです:

function createByJson() {
    var pearlData = [                   
                    {description:'Choose your pearl...', value:'Pearls', text:'Pearls'},
                    {description:'Beautiful black stone', value:'Black Pearl', text:'Black Pearl'},
                    {description:'Classic white stone', value:'White Pearl', text:'White Pearl'}
                    ];
    $("#DropItPearls").msDropDown({byJson:{data:pearlData, name:'pearls', width: 200}}).data("dd"); 
        var blodeuweddData = [          
                    {description:'Choose your item...', value:'Blodeuwedd', text:'the Blodeuwedd Collection'},
                    {description:'A striking statement', value:'BlodeuweddCelticStatement', text:'Celtic Statement Piece'},
                    {description:'Gold laced flower and pearl', value:'BlodeuweddBracelet', text:'Bracelet'},
                    ];
    $("#DropItBlodeuwedd").msDropDown({byJson:{data:blodeuweddData, name:'blodeuwedd', width: 250}})
                                                            .msDropDown({on:{change:function(data, ui) {
                                                                                                                                                                    var val = data.value;
                                                                                                                                                                    if(val!="")
                                                                                                                                                                        window.location = val;
                                                                                                                                                                }}}).data("dd");
        var deliveryData = [                    
                    {description:'Choose your method...', value:'Delivery', text:'Delivery Options'},
                    {description:'4-6 weeks delivery', value:'Four Weeks', text:'Made To Order'},
                    {description:'(unavailable on this item)', value:'Rush', text:'Express Delivery', disabled:true}
                    ];
    $("#DropItDelivery").msDropDown({byJson:{data:deliveryData, name:'delivery', width: 200, selectedIndex: 1}}).data("dd");
         paymentData = [                    
                    {                                                                                                                               description:'How would you like to pay?', value:'Payment', text:'Payment Method'},
                    {image:'images/msdropdown/icons/Visa-56.png', description:'Secure online payment', value:'Visa', text:'Visa'},
                    {image:'images/msdropdown/icons/Paypal-56.png', description:'Secure online payment', value:'Paypal', text:'Paypal'},
                    {image:'images/msdropdown/icons/EmailPay-56.png', description:'Order by email', value:'Email Payment', text:'Send Your Details'},
                    {image:'images/msdropdown/icons/Mastercard-56.png', description:'(coming soon)', value:'Mastercard', text:'Mastercard', disabled:true},
                    {image:'images/msdropdown/icons/Collect-56.png', description:'(coming soon)', value:'Collection', text:'Order and Collect', disabled:true},
                    {image:'images/msdropdown/icons/Email-56.png', description:'email Menna', value:'Other Method', text:'Alternatives'}
                    ];
    $("#DropItPayments").msDropDown({byJson:{data:paymentData, name:'payments', width: 250}}).data("dd");
    }
    $(document).ready(function(e) { 
    //no use
    try {
        var pages = $("#pages").msDropdown({on:{change:function(data, ui) {
                                                var val = data.value;
                                                if(val!="")
                                                    window.location = val;
                                            }}}).data("dd");
        var pagename = document.location.pathname.toString();
        pagename = pagename.split("/");
        pages.setIndexByValue(pagename[pagename.length-1]);
        $("#ver").html(msBeautify.version.msDropdown);
    } catch(e) {
        //console.log(e);   
    }

    $("#ver").html(msBeautify.version.msDropdown);

    //convert
    $("select").msDropdown();
    createByJson();
    $("#tech").data("dd");
});
function showValue(h) {
    console.log(h.name, h.value);
}
$("#tech").change(function() {
    console.log("by jquery: ", this.value);
})
//

そしてhtml:

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Item</p></div>
    <div id="DropItBlodeuwedd"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Precious Stones</p></div>
    <div id="DropItPearls"></div>
</div>

<div id="dropOptions">
     <div id="dropOptionsTitle"><p>Payment</p></div>
    <div id="DropItPayments"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Delivery</p></div>
     <div id="DropItDelivery"></div>
</div>

<div id="dropOptions">
    <div id="dropOptionsTitle"><p>Buy Now!</p></div>
     <div id="DropItBuy"></div>
</div>

繰り返しますが、ここで表示可能な作業バージョン

よろしくお願いします!

4

1 に答える 1

0

ドロップダウンが変更されるたびに[購入]ボタンを更新しようとするのではなく、[購入]ボタンがドロップダウンの現在の内容を動的に読み取り、それに基づいてリダイレクト用のリンクを作成することをお勧めします。

あなたのコードからは、最終的なURLの形式がどうあるべきかわかりません。たとえば、配信オプションの現在の値を取得するには、の$('#DropItDelivery :selected').text()ようなものになるかどうかを確認できます"Made To Order"

今すぐ購入!これらの値を読み取り、基本的な文字列連結を使用してURLを構築buttonするイベントを伴う可能性があります。例:click

window.location = "buynow.html?delivery=" + $('#DropItDelivery :selected').text() +
                  "&payment=" + $('#DropItPayments :selected').text()
                  // etc.

もちろん、これらのオプションはサーバーで処理する必要があります。

プロセッサの支払いページにリダイレクトする場合は、支払い方法に基づいて分岐し、それに基づいて必要なURLを指定できます。

var pm = $('#DropItPayments :selected').text();
if (pm == "Visa")
{
    // Visa payment URL construction
}
else if (pm == "Send Your Details")
{
    // Send your details URL construction
}
// etc.
于 2013-01-29T18:33:18.890 に答える