0

私はjQueryを学ぼうとしていますが、すでに慣れている人にはかなり簡単な質問があります。

アプリケーション：PHPとjQueryおよびBootstrap Toggle Buttons（http://www.larentis.eu/bootstrap_toggle_buttons/）を使用して、ユーザーが「オン」にしたトグルボタンに応じて動的リンクアドレスを作成します。

現在、フォームを使用してトグルボタンの状態をPOSTしています。ページがリロードされると、それらのPOST変数がプルされ、リンクにアタッチされます。

私がやりたいのは、ユーザーがフォームの投稿を使用する代わりに、ユーザーがボタンを切り替えたときにjQueryがページ上のリンクを自動的に変更するようにすることです。

私ができるようにしたいのは、トグルボタンがトグルされるたびに素人の用語の説明にあります：

$link = "http://www.mydomain.com/students.php?view="

if jQuery toggle-button-1 = on then add "name"
if jQuery toggle-button-2 = on then add "id"
if jQuery toggle-button-3 = on then add "address"

// If toggle-button-1 and toggle-button-2 were on and toggle-button-3 was off
// then $views would equal
$views = "name,id"

// On the webpage it would then display

http://www.mydomain.com/students.php?view=name,id

// If the person toggled toggle-button-1 to off, the link would display:

http://www.mydomain.com/students.php?view=id

あなたがそれを理解できるように私がこれを説明したことを願っています...それは私がやろうとしていることは本当に簡単で、PHPでこれを行う方法を知っていますが、私はオンラインで何かを探しているような気がしますシンプルで、頭を包み込むことができないようです。

誰かが私を助けてくれるか、正しい方向に私を向けてくれるなら、私はそれを大いに感謝します！

ありがとう！！

4

2 に答える 2

2

これがjsFiddleの私の例です

HMTL

<input type="checkbox" name="name" value="name" id="name" /> name<br />
<input type="checkbox" name="id" value="id" id="id" /> id<br />
<input type="checkbox" name="address" value="address" id="address" /> address<br />
Link: <input type="text" name="url" value="" id="url" />

JavaScript

$(function() {
    var link = "http://jsfiddle.net/mouse0270/chnyy/"
    $('input[type=checkbox]').change(function () {
        var viewItems = "";
        $('input[type=checkbox]:checked').each(function () {
            viewItems += ','+$(this).val();
        });
        $('#url').val(link+'?view='+viewItems.substring(1));                  
    });         
});​
于 2012-11-21T16:55:53.720 に答える
1

http://jsfiddle.net/CvsbD/

HTML

<input type="checkbox" class="items" id="one" data-view="name" />
<input type="checkbox" class="items" id="two" data-view="id" />
<input type="checkbox" class="items" id="three" data-view="address" />

<input type="text" id="output" />

JS

$("body").on('change', '.items', function(){
    // filter down to items that are checked
    var items = $('.items').filter(function(){
        return this.checked;
    });
    // map data values to an array
    items = items.map(function (){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​

デリゲートをドキュメント本文にバインドすることは、一般的に最善の方法ではないことに注意してください。チェックボックスのより直接的な祖先を使用するか、変更イベントをチェックボックス自体にバインドすることができます。

これは、次のようにさらに単純化できます（忘れて:checkedしまいます）。

$("body").on('change', '.items', function(){
    // filter down to items that are checked, and get their data-view value.
    var items = $('.items:checked').map(function(){
        return $(this).data('view');
    }).get();

    // join the array with a comma separator 
    $("#output").val(items.join(','));
});​
于 2012-11-21T16:53:32.887 に答える