Question

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

以下代码出现问题：

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

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

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相关的问题。在此先感谢！

P.S。工具提示适用于单个元素。

Answer 1

因为您的网页会有很多<td><div></div></td>来自生成的HTML（通过PHP）以及所有匹配td div，所有这些都会显示您是否要调用$('td div').//so on < / p>

因此，您需要指定要显示的那个，并且在您的情况下，您希望靠近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，因此在$(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... */
}

Answer 2

为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());
});

An Example Here

Answer 3

@ luiges90解决了你的一个问题......我还会提到你的工具提示都显示相同值（页面上第一个文本区域中的值）的原因是因为你的选择器$('textarea')是选择页面上的所有textareas。当你调用.val（）时，默认情况下，它只返回集合中第一个元素的值。简而言之，在您的焦点事件中，只需使用以下内容：

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

Answer 4

这就是我所说的：

<强> 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在这里有点无偿，但是我提供它作为一个overselecting的演示（如果还有一个span.uneditable或其他下一个与{{1 }} ...）。

div.uneditable

http://jsfiddle.net/fuFuT/

Answer 5

所有这些内容同时出现的原因是因为您选择了所有这些内容，$("textarea")会返回所有匹配的元素。

为了防止这种行为，请创建它（我没有包含事件函数以提高可读性）

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

至于工具提示的id / class：通常最好将CSS保持在外部，因此在这种情况下，给工具提示一个CSS类会更好。

textarea的ID或类？

5 个答案: