1

いくつかのボタン/ラベルを含むいくつかのIDを持つdivがあります。そのコンテナ自体。ユーザーがボタンをクリックすると、同じdivでダイアログが表示される必要があるが、divがページから消える必要があるボタンが必要です。したがって、[切り離す]ボタンをクリックすると、そのdivを含むダイアログが表示され、ボタンが[接続]に変わります。アタッチをクリックするとダイアログが消え、通常のdivがページに表示されます。

これは私がこれまでに試したことです。デタッチがクリックされた場合にのみ機能します。アタッチがクリックされた場合、ダイアログは閉じますが、通常のdivは表示されません。

   $(document).on('click', '#detach', function() {
      var button = $(this).text();
          if (button == 'Detach') {
           $('.search_div_box').dialog({ autoOpen: false, width: 700 });
           $('.search_div_box').dialog('open');
              $(this).html('Attach');
          } else if (button == 'Attach') {
             $('.search_div_box').dialog('close');
             $(this).html('Detach');
          }

      });

アタッチ部分にコードがないことは知っていますが、ダイアログを閉じるだけですが、本体にdivを再度追加するなど、さまざまなことを試しましたが、機能しませんでした。ありがとうございました

4

3 に答える 3

3

jQueryの$.clone（）を使用して、の複製を作成し、div次のようなダイアログとともに表示/非表示にすることができます。

var $original = $('.search_div_box');
var $clone = $('.search_div_box').clone();
    $clone.dialog({
            autoOpen: false,
            width: 700,
        });

$(document).on('click', '#detach', function() {
    var button = $(this).text();

    if (button == 'Detach') {
        $original.hide();
        $clone.dialog('open');

        $(this).html('Attach');
    } else if (button == 'Attach') {
        $original.show();
        $clone.dialog('close');

        $(this).html('Detach');
    }
});​

JSFiddle Here

于 2012-09-07T17:29:35.633 に答える
0

これを試して：

html：

<button id="button">Attach</button>

javascript（jquery）：

$("#button").click(function() {
    var button = $(this).html();
    if (button === "Attach") {
        $('.search_div_box').dialog('close');
        $(this).html('Detach');
    }
    else {
        $('.search_div_box').dialog({ autoOpen: false, width: 700 });
        $('.search_div_box').dialog('open');
        $(this).html('Attach');
    }
});

それはうまくいくはずです:)

于 2012-09-07T17:23:45.420 に答える
0

これを試して：

HTML

<button class="content detach"></button>

CSS

.content.detach:after {
   content: "Detach";
}
.content.attach:after {
   content: "Attach";
}

JS

    $('.search_div_box').dialog({ autoOpen: false, width: 700 });
$(".content, .ui-dialog-titlebar-close").on("click", function(){
    if ($(".content").hasClass("detach")) {

        $('.search_div_box').dialog('open');
    } else {
        $('.search_div_box').dialog('close');
    }

    $(".content").toggleClass("detach attach");
});

デモ：http： //jsfiddle.net/n8Mbz/

于 2012-09-07T17:27:11.467 に答える