0

私は最初からツールチップに取り組んでいました。ツールチップのコードが以下に追加されました。

次のコードで問題が発生します。

ツールチップは、テキスト領域に焦点を合わせたりぼかしたりするとフェードインおよびフェードアウトしますが、問題は、すべてのツールチップ（すべての要素に対応するツールチップ）が同時にフェードインおよびフェードアウトすることです。

2番目の問題は、テキスト領域の値が、最初のテキスト領域の値であるすべてのツールチップで同じであるということです。

PHP

<?php for($j; $j<5; $j++) { ?>
<tr>
<td style="position:relative"><?php echo CHtml::activeTextArea($PackageDeal,"package[$j][1]") ; ?>
    <div style="color:#0D776e;font-size:15px;font-family:calibri;padding:1%;margin:0 0.5%;;word-wrap:break-word;display:none;z-index:100;width:200px;mion-height:25px;position:absolute;top:30px;"></div>
</td>
</tr> 
<?php }?>

Jquery

<script src="jquery-1.8.3.min.js"></script>
<script>$(document).ready(function(){
        $("textarea").focus(function(){
            $("td div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
            $("td div").html($("textarea").val());
        });
        $("textarea").blur(function(){
            $("td div").fadeOut(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});

        });
        $("textarea").keyup(function(){
            $("td div").html($("textarea").val());
            });
            });
</script>

問題は、PHP のforループでこのツールチップを使用していて、ツールチップが機能するようにさまざまな方法を試したことです。表示されるテキストがすべてで異なり、すべてが同時に表示されないように、ツールチップ（div要素）とテキスト領域のID/クラスを保持する必要があるかどうかを確認する必要があります。また、これがjquery、php、またはhtml関連の問題であるかどうかを知りたいです。前もって感謝します！

PSツールチップは、単一の要素に対して正常に機能します。

4

5 に答える 5

2

あなたのページには<td><div></div></td>（PHPによって）生成されたHTMLからの多くのがあり、すべてtd divの一致があるので、あなたが呼び出すとしたら、それらすべてが表示されます$('td div').//so on

したがって、表示するものを指定する必要があります。この場合、focusedまたはである要素に近いものが必要blurredです。jQueryはそれが得意です。

$("textarea").focus(function(){
    var targetArea = $(this);
    targetArea.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
        .html(targetArea.val());
});

また、@ joeltineの回答に従って、そのtextareaのhtmlのみを表示する必要があるため、callパラメーターでも同じものを使用し$(this)ますhtml。

$(this)パフォーマンスのために、それらをチェーンして、上記のように変数にキャッシュすることもできます-$コンストラクターは高価です。

そしてもう1つ、cssフェードインとフェードアウトのときに設定するように見えますが、必須ではありませんcss。代わりにファイルに設定できる場合です。あらかじめ設定しておくとスタイルが見えず、display: noneとにかく表示されません。

$("textarea").focus(function(){
    var targetArea = $(this);
    targetArea.siblings('div').fadeIn(400).html(targetArea.val());
});

およびCSSの場合：

/* You really want to apply this css to all "td div" for this one! */
td div {
   background-color: #E7F1F0;
   border: 1px solid #86BBB6;
   /* More styles for tooltips, such as display: none; position: relative; etc... */
}
于 2013-01-12T02:46:08.333 に答える
1

あなたのためにを使用しclassてくださいtextarea、すなわちmyTxtArea、の$(this)ように使用してください

$("textarea.myTxtArea").focus(function(){
   var el=$(this);
   el.closest("td").find("div").fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"});
   el.closest("td").find("div").html(el.val());
});

ここに例があります。

于 2013-01-12T02:47:41.607 に答える
1

@ luiges90は、1つの問題に対処しました...また、ツールチップがすべて同じ値（ページの最初のテキスト領域の値）を表示している理由についても説明します。これは、セレクター$('textarea')がページのすべてのテキスト領域を選択しているためです。その上で.val（）を呼び出すと、デフォルトでは、コレクションの最初の要素の値のみが返されます。つまり、フォーカスイベントでは、次のようなものを使用します。

$("textarea").focus(function(){
    var $this = $(this);
    $this.siblings('div').fadeIn(400).css({"background-color":"#E7F1F0","border":"1px solid #86BBB6"})
        .html($this.val());
});
于 2013-01-12T02:48:53.923 に答える
1

これは私が話していたことです：

HTML

<table>
  <tbody>
    <tr>
      <td>
        <textarea class="editable">This is a texarea.</textarea>
        <div class="uneditable"></div>
      </td>
    </tr>
    ... More rows ...
    <tr>
      <td>
        <textarea class="editable">This is a texarea.</textarea>
        <div class="uneditable"></div>
      </td>
    </tr>
  </tbody>
</table>

jQuery

textarea.editable、text.uneditable、$(this).siblings('.uneditable')、およびの使用に注意してください$(this).next('div.uneditable')。はここdiv.uneditableでは少し不必要ですが、過剰選択のデモンストレーションとして提供します ( ... と一緒に次のフローがあったspan.uneditable場合に備えて)。div.uneditable

$(document).ready(function () {
  var $editable = $('textarea.editable');

  $editable
      .focus(focus)
      .blur(blur)
      .keyup(keyup);

  function focus() {
    $(this).siblings(".uneditable").fadeIn(400).css({
      "background-color": "#E7F1F0",
      "border": "1px solid #86BBB6"
    })
    .html($(this).val());
  }

  function blur() {
    $(this).siblings('.uneditable').fadeOut(400).css({
      "background-color": "#E7F1F0",
      "border": "1px solid #86BBB6"
    });
  }

  function keyup() {
    $(this).next("div.uneditable").html($(this).val());
  }
});

http://jsfiddle.net/fuFut/

于 2013-01-12T03:08:12.090 に答える
-1

それらすべてが同時に実行される理由は、それらすべてを選択すると、$("textarea")一致するすべての要素が返されるためです。

その動作を防ぐために、これを作成します（読みやすくするためにイベント関数は含めませんでした）

// Do things for each matching elements, separately
$("textarea").each(function() {
    $(this).focus();
    $(this).blur();
    $(this).keyup();
});

ツールチップのid/classについては、一般的にCSSを外部に保持する方がよいため、その場合は、ツールチップにCSSクラスを指定する方が適切です。

于 2013-01-12T02:48:20.177 に答える