1

大きな編集: コード セクションを更新しましたが、質問は同じままです。

私はおそらく、いくつかの助けを借りることができるユニークな jQuery の問題を抱えています。

私はこのような（完全に動作する）関数を持っています...

var openslide1 = function() { 
      $("#slide1").animate({
        left: "+=250px",
      }, 400, function() {
        // Animation complete.
      });
      $(this).unbind('click', openslide1); \\ to prevent from pushing slide over too many times
};

$("#openslide1").click(openslide1);

私の問題は、無制限の数のスライドが存在する可能性があるため、「openslides」になる可能性があることです。各「openslide」セレクターは、独自のスライドに対応しています。(たとえば、#openslide2 は #slide2 を開き、#openslide2 のバインドを解除します...など)。

では、これらを 1 つの変数と関数に組み合わせるにはどうすればよいでしょうか。

また、別のイベントのクリックで #openslide を「再バインド」したいと考えています。現在、私はこれを通してそれらを一度に1つずつ行うことができます....

$("#closeslide1").click(function() {
    $("#slide1").animate({
        left: "-=250px",
      }, 500, function() {
        // Animation complete.
      }); 
    $('#openslide1').click(openslide1); \\ rebinds openslide1
});

しかし、これが結合された関数になると、「openslide1」は関数の変数ではなくなると思います。では、#closeslide がクリックされたときにそのクリック イベントを再バインドするにはどうすればよいでしょうか。(そして明らかに、この質問の最初の部分を使用して、closeslide 変数にも適用します。)

<div class="section">
<a class="edit-btn" id="openslide1" href="#null">edit</a>
<a class="edit-btn" id="openslide2" href="#null">edit</a>
<a class="edit-btn" id="openslide3" href="#null">edit</a>
<a class="edit-btn" id="openslide4" href="#null">edit</a>
</div>
<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide1" class="btn btn-primary">Submit</a> <a id="closeslide1" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide2">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide2" class="btn btn-primary">Submit</a> <a id="closeslide2" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide3">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide3" class="btn btn-primary">Submit</a> <a id="closeslide3" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>
<div class="slide" id="slide4">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" id="submitslide4" class="btn btn-primary">Submit</a> <a id="closeslide4" class="btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>

助けてください！

ありがとう！

4

3 に答える 3

0

操作する1つまたは複数の要素への参照を渡すように関数を変更します。

var openslide = function(elem) { 
  var id = elem.attr("id");
  $("#" + id.substring(5)).animate({
    left: "+=250px",
  }, 400, function() {
    // Animation complete.
  });
  $('body').animate({
    marginLeft: "+=250px",
  }, 400, function() {
    // Animation complete.
  });
  elem.unbind('click', openslide);
};

$(".edit-btn").click(function() {openslide($(this))});

次に、すべての要素に単一の関数を使用でき、それらが共通のクラスを持っている場合は、それらすべてを同時にバインドできます（この場合、私はそれらを呼び出しました.openslide）。

編集：元の質問をもう一度見てみると、最初にアニメーション化されている要素が同じ要素ではないことに気づきました。ただし、クリックした要素との関係が簡単に定義されている場合（たとえば、元の要素の子、次の兄弟など）、適切なセレクターを簡単に思い付いて選択できます。上記の例では、クラスがのターゲット要素との兄弟関係を想定して.targetclassいますが、それに応じて変更します。

openslide1編集2：idがidの要素に対応することを前提として、idを使用するように変更しましたslide1。

于 2012-10-26T20:29:52.403 に答える
0

試してみますが、これは移植性に役立ちますか?

$(".openslide1").click(function() {
      openSlide(".slide1", "body", 400, ".openslide1");
});

function openSlide(target, bodyObj, speed, original) {
      $(target).animate({
        left: "+=250px",
      }, speed, function() {
        // Animation complete.
      });
      $(bodyObj).animate({
        marginLeft: "+=250px",
      }, speed, function() {
        // Animation complete.
      });
      $(original).unbind('click');
}
于 2012-10-26T20:24:31.677 に答える
0

次のようにリンクを作成します。

<div class="section">
    <a class="edit-btn openslide" data-slide="#slide1" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide2" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide3" href="#null">edit</a>
    <a class="edit-btn openslide" data-slide="#slide4" href="#null">edit</a>
</div>

スライドは次のとおりです。

<div class="slide" id="slide1">
<h1>Edit Row</h1>
<p>Prototyping data below, may not reflect link clicked.</p>
<a href="#null" class="submitslide1 btn btn-primary">Submit</a> <a class="closeslide1 btn btn-danger" style="color:#fff" href="#null">Cancel</a>
</div>

どのような効果が必要かを正確に把握するのは困難ですが、ハンドラーの一般的な形状は次のようになります。

$(".openslide, .closeslide").click(function() {
    if($("body").filter(":animated").length) { return; } //animation in progress, abort.
    var $slide = $($(this).data('slide'));
    var state = $slide.data('state') || 'closed';
    var sign = (state == 'closed') ? '+' : '-';
    $slide.animate({
        left: sign + "=250px"
    }, 400, function(){
        $slide.data('state', (sign == '+') ? 'open' : 'closed');
    });
    $('body').animate({
        marginLeft: sign + "=250px"
    }, 400);
    return false;
});

テストされていない

ご覧のとおり、1 つの関数 (機能する場合) は、slideopen と slideclose の両方のアクションを処理します。

スクリプトを調整して、目的を正確に達成する必要があります。

于 2012-10-26T22:43:51.190 に答える