2

Jsfiddle について: http://jsfiddle.net/jhzux/

この単純なスクリプトで多くの時間を無駄にしました..私がしたいことは、jQuery でフォームを複製して、正しく機能させることです。

そもそも、このコードを JsFiddle で実行すると機能しませんが、私のブラウザでは機能します..奇妙な... -.-

第二$(this).next(".persianaops").slideToggle(300);に、部分は機能しません.persianaver部分が表示されるだけで何も起こりません

persianaver 部分が表示されると、ラジオ ボタンが常に機能するとは限りません。最初のセルでは正常に機能しますが、後で他のクローンでは、すべてのラジオ ボタンが同じグループに属しているように動作するため、2 回しか適用できません。一部であり、クローンの1つよりも..（私の説明はちょっと混乱しているので、Jsフィドルでこれを見ることができるといいのですが..）

それで、ラジオボタンが機能するJQでテーブルを複製し、.persianaops部分を修正するより良い方法はありますか?

HTML:

<ul id="listing" style="list-style:none;">
    <li>
        <table class="pedido">
            <tr>
                <td><select name="product[]">
                    <option value="0">
                        Perfil:
                    </option>
                    <option value=
                    "68mm 5 Cámaras AD rendszer egyenes szárny, ütköző tömítéssel">
                    68mm 5 Cámaras 7001AD, con dos juntas
                    </option>
                    <option value=
                    "68mm 7 K AD rendszer íves szárny, ütköző tömítéssel">
                        68mm 7 Cámaras 7001AD con dos juntas
                    </option>
                    <option value=
                    "80 mm 6 K Tok + 7 K íves szárny AD rendszer, ütköző tömítéssel">
                    80 mm Marco 6 Cámaras + Hoja de 7 Cámaras 7001AD con
                    dos juntas
                    </option>
                    <option value=
                    "68mm 7 K MD rendszer ütköző és középtömítéses, íves szárny">
                    68mm 7 Cámaras 7001MD con tres juntas
                    </option>
                    <option value=
                    "80 mm 8 K MD rendszer ütköző és középtömítéses, íves szárny">
                    80 mm 8 Cámaras 7001MD con tres juntas
                    </option>
                </select></td>
            </tr>
            <tr>
                <td><input class="comment" name="h[]" value="Horizontal"> x
                <input class="comment" name="v[]" value="Vertical"> uds:
                <input name="uds[]" style="width:60px;"></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option>
                            Color
                        </option>
                    </select> Persiana <input class="persiana" name=
                    "persiana[]" type="checkbox">
                    <div class="persianaver" style=
                    "float:right; display:none">
                        Con motor<input name="f[]" type="radio" value=
                        "auto"> Manual<input name="f[]" type="radio" value=
                        "manual">
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td style="width:435px;">
                    <div class="persianaops" style=
                    "float:right; display:none">
                        IMPORTANTE: En caso de haber seleccionado la opción
                        persiana usted tiene que especificar el tamaño de
                        la tapa del cajón (Lugar donde se sitúa la caja de
                        persiana) Puede especificarlo en el campo
                        comentario <a href="images/demo.jpg" id="pregunta"
                        name="pregunta"><img alt="pregunta" height="15"
                        src="images/ask.jpg" width="15"></a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                <textarea class="comment" cols="59" name="comment[]" rows=
                "5">Comentario</textarea></td>
            </tr>
        </table>
    </li>
</ul><button id="clonar" name="colnar">Cloneme</button><br>
<br>
<h3>Datos personales:</h3><br>
<table>
    <tr>
        <td>Nombre y apellido:</td>
        <td><input name="name" type="text"></td>
    </tr>
    <tr>
        <td>Email:</td>
        <td><input name="mail" type="text"></td>
    </tr>
    <tr>
        <td>Teléfono:</td>
        <td><input name="telefono" type="text"></td>
    </tr>
</table>

JQ

$(document).ready(function() {
    var $orig = $(".pedido").clone();
    $("#clonar").live('click', function(e) {
        e.preventDefault();
        $("#listing").append($orig.clone());
        $(".persiana").click(function() {
            $(this).next(".persianaver").slideToggle(300);
            $(this).next(".persianaops").slideToggle(300);
        });
        $(".comment").focus(function() {
            if (this.value === this.defaultValue) {
                this.value = '';
            }
        }).blur(function() {
            if (this.value === '') {
                this.value = this.defaultValue;
            }
        });
    });
});​
4

3 に答える 3

0

これを完全に再構築します。例を参照してください。ステートメントclick内にイベントを追加することにより、イベントを二重にバインドします。live

ここではon代わりに使用します。ボディレベルを監視していますが、フォームコンテナまたはフォームに締めてパフォーマンスを向上させる必要があります. を使用して、イベント ハンドラーを一度宣言するだけonです。

次に、クローンを1行だけクローンします。デフォルトはとにかく何もしないので、デフォルトのボタンを防ぐ必要はありません。

ラジオ ボタンは複製されているため、同じ名前を共有しています。つまり、一度にアクティブにできるラジオ ボタンは 1 つだけです。それらの名前を変更するためのコードを追加しました。

http://jsfiddle.net/jhzux/3/

$(document).ready(function() {
    var $orig = $(".pedido").clone();
    var counter = 0;

    $("body").on('click', '.persiana', function() {
        $(this).next(".persianaver").slideToggle(300);
        $(this).next(".persianaops").slideToggle(300);
    });

    $("body").on('focus', '.comment', function() {
        if (this.value === this.defaultValue) {
            this.value = '';
        }
    }).on('blur', '.comment', function() {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
    });

    $("#clonar").click(function(e) {
        //have to change radio button names to be unique
        counter++;
        $orig.find(':radio').each( function() {
            $(this).prop('name', $(this).prop('name') + counter);
        });

        //append clone
        $("#listing").append($orig.clone());
    });
});​
于 2012-04-04T17:38:03.987 に答える
0

Fiddle を修正しました: http://jsfiddle.net/8v6CP/1/。

いくつかの末尾が欠落})しており、HTML に</tr>. この種の問題を回避するために、コードを適切にインデントすることをお勧めします。

チェックボックスについては、イベント ハンドラ内でイベントを".persiana"アタッチします。次を使用して外部に接続する必要があります。click"#clonar"live

$(document).ready(function(){
    var $orig = $(".pedido").clone();

    $(".persiana").live("click", function () {
        $(this).next(".persianaver").slideToggle(300);
        $(this).next(".persianaops").slideToggle(300);
    });

    $("#clonar").live('click', function (e) {
        e.preventDefault();
        $("#listing").append($orig.clone());

        $(".comment")
            .focus(function() {
                if (this.value === this.defaultValue) {
                    this.value = '';
                }
            })
            .blur(function() {
                if (this.value === '') {
                    this.value = this.defaultValue;
                }
            });
    });
});
于 2012-04-04T17:36:21.600 に答える
0

JsFiddleで動作しないのは; jQuery ではなく MooTools を使用するように設定しているため、おそらく機能していません。

複製ロジックに関しては; 動作するはずです。変数を使用してクローンイベントを実行し、コンテンツを新鮮に取得するのではなく、「#clonar」クリックイベントの後に変数を「クローン」しているのは奇妙だと思いますが。

これを次のように変更します。

$(document).ready(function()
{
        var $orig = $(".pedido").clone();

        $("#clonar").live('click' , function(e){
            e.preventDefault();
            $("#listing").append($orig); 
            // or the non variable instance: 
            // $("#listing").append( $("#pedido").clone(); )
        });
});
于 2012-04-04T17:30:04.667 に答える