Php textarea的ID或类？

我从头开始编写工具提示。工具提示的代码已添加到下面

出现以下代码的问题：

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

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

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>

$（文档）.ready（函数（）{
$（“textarea”）.focus（函数（）{
$（“td div”）.fadeIn（400）.css（{“背景色”：“#E7F1F0”，“边框”：“1px实心#86BBB6”）；
$（“td div”）.html（$（“textarea”）.val（））；
});
$（“textarea”）.blur（函数（）{
$（“td div”）.fadeOut（400）.css（{“背景色”：“#E7F1F0”，“边框”：“1px固体#86BBB6”）；
});
$（“textarea”）.keyup（函数（）{
$（“td div”）.html（$（“textarea”）.val（））；
});
});

问题是，我在PHPfor循环中使用了这个工具提示，我尝试了多种方法，使工具提示能够正常工作。我需要询问是否应该为工具提示（div元素）和文本区域保留Id/类，以便显示的文本在所有方面都不同，并且不会同时显示。我还想知道这是一个jquery、php还是html相关的问题。提前谢谢

---

另外，工具提示对单个元素很有效。

因为您的页面将有许多来自生成的HTML（由PHP生成）的

，并且所有匹配项
td div
，如果您要调用
$（'td div'），所有这些都将显示出来。//依此类推

因此，您需要指定要显示哪一个，在您的情况下，您需要靠近元素的一个，该元素是
聚焦的
或
模糊的
。jQuery擅长于此

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

此外，根据@joeltine answer，您还需要仅显示该文本区域的html，因此在
html
调用参数中也使用相同的
$（this）

为了提高性能，您可能希望将它们链接在一起，并将
$（this）
缓存到一个变量，如上所述-
$
构造函数非常昂贵

还有一件事，当它淡入淡出时，您似乎设置了
css
，但它们不是必需的-当您可以在
css
文件中设置它时。如果您事先设置了样式，则无法看到它们的样式，而且它们也不会显示（通过
display:none
）

在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... */
}

因为您的页面将有许多来自生成的HTML（通过PHP）的
s，并且所有匹配的
td-div
，如果您要调用
$（'td-div'），它们都将显示出来。//依此类推

因此，您需要指定要显示哪一个，在您的情况下，您需要靠近元素的一个，该元素是
聚焦的
或
模糊的
。jQuery擅长于此

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

此外，根据@joeltine answer，您还需要仅显示该文本区域的html，因此在
html
调用参数中也使用相同的
$（this）

为了提高性能，您可能希望将它们链接在一起，并将
$（this）
缓存到一个变量，如上所述-
$
构造函数非常昂贵

还有一件事，当它淡入淡出时，您似乎设置了
css
，但它们不是必需的-当您可以在
css
文件中设置它时。如果您事先设置了样式，则无法看到它们的样式，而且它们也不会显示（通过
display:none
）

在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... */
}

为您的
textarea
使用
class
，即
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());
});


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

.
它们同时运行的原因是，您选择了所有它们，
$（“textarea”）
返回所有匹配的元素

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

至于工具提示的id/类：通常最好将CSS保持在外部，因此在这种情况下，为工具提示提供一个CSS类会更好。
所有工具提示同时出现的原因是，您选择了所有工具提示，
$（“textarea”）
返回所有匹配的元素

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

至于工具提示的id/类：通常最好将CSS保持在外部，因此在这种情况下，为工具提示提供CSS类会更好。
@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());
});

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

这就是我所说的：

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>

这就是我刚才说的：

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>

这不是PHP的问题。你用
td div超选了
；从字面上看，在
.focus
和
.blur
上，您将在页面上的
td
中获得每个
div
，并且