textarea的ID或Class？

Question

我是从零开始做工具提示的。下面添加了工具提示的代码。

关于下列代码的问题：

工具提示在聚焦或模糊文本区域时会消失，但问题是，所有工具提示(与所有元素对应的工具提示)同时淡入和消失。

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

<?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>

问题是，我在PHPfor循环中使用了这个工具提示，并且我尝试了多种方法，这样工具提示就可以使用了。我需要问一下是否应该为工具提示(div元素)和文本区域保留一个Id / Class，这样所有显示的文本都是不同的，并且它们都不会同时出现。另外，我想知道这是一个jquery、php还是html相关的问题。提前谢谢！

对于单个元素，工具提示工作得很好。

Answer 1

因为您的页面将有大量来自生成的<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());
});

此外，根据@joeltineAn复，您也只需要显示该textarea的html，所以在您的html调用参数中也要使用相同的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 90解决了你的一个问题..。我还将提到工具提示全部显示相同值的原因(页面上第一个文本区域中的值)，因为选择器$('textarea')正在选择页面上的所有文本区域。对此调用.val()时，默认情况下，它只返回集合中第一个元素的值。所以简单地说，在你的焦点事件中，只需使用这样的东西：

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