0

我正在从头开始制作工具提示。工具提示的代码已添加到下方。

以下代码的问题：

工具提示在聚焦或模糊文本区域时淡入和淡出，但问题是，所有工具提示（对应于所有元素的工具提示）同时淡入和淡出。

第二个问题是文本区域的值在所有工具提示中都是相同的，即第一个文本区域的值。

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 / Class，以便显示的文本在所有方面都不同，并且所有这些都不会同时显示。另外我想知道这是否是与 jquery、php 或 html 相关的问题。提前致谢！

PS工具提示适用于单个元素。

4

5 回答 5

2

因为您的页面将有很多<td><div></div></td>来自生成的 HTML（由 PHP）生成的 s 和所有匹配td div项，所以如果您要调用，它们都会显示$('td div').//so on

因此，您需要指定要显示哪一个，并且在您的情况下，您希望靠近元素focusedor的那个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 的回答，您还需要仅显示该文本区域的 html，因此也可以$(this)在您的html调用参数中使用相同的内容。

为了性能，您可能希望将它们链接在一起并缓存$(this)到上面的变量 -$构造函数很昂贵。

还有一件事，你似乎设置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

将 aclass用于您的textarea, iemyTxtArea并使用$(this)like

$("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 解决了您的一个问题...我还将提到您的工具提示都显示相同值（页面上第一个文本区域中的值）的原因是因为您的选择器$('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 / 类：通常最好将 CSS 保留在外部，因此在这种情况下，为工具提示提供 CSS 类会更好。

于 2013-01-12T02:48:20.177 回答