通过数据属性选择通过 Ajax 加载的元素答案

【问题标题】：Select element loaded via Ajax by data attribute通过数据属性选择通过 Ajax 加载的元素
【发布时间】：2013-12-21 21:16:03
【问题描述】：

我正在通过 ajax 加载许多嵌套的 div，并且需要通过数据属性选择特定元素。下面的代码在更改 div 的背景时可以正常工作。

 $.ajax({
    type: "POST",
    url: "scripts/get_transcription.php",
    data: {
        gene: 1,
    },
    success: function(data) {
    $('#transcription').html(data);
    $('*[data-type="P"]').css('background', 'red');
}
  });

但是，如果我不想更改背景，我想说的是设置特定 div 的不透明度，所有 div 都被分配不透明度：

$('*[data-type="P"]').css({opacity, 0.5});

如果我在 div 上使用 fadeOut() 也是一样...所有 div 都会淡出。为什么 css 背景适用于特定的 div 而不是 opacity 或 fadeOut（适用于所有 div）？

编辑

看起来 ol' div 没有关闭 catcha。每个transcription_segment 的关闭div 都在while 循环之外，如下所示：

echo "<div id='transcription_segments' style='width:2000px;;white-space:nowrap;float:left;'>";
while($row = mysql_fetch_assoc($result)) {
echo "

<div id='transcription_segment_" . $row['gene_dna_segments_pk'] . "' data-transcription-segment='" . $row['gene_dna_segments_pk'] . "' data-type='"  . substr($row['dna_segment_type'], 0, 1) . "' style='width:" . $row['dna_segment_length'] . "px;display:inline-block;'>

<div style='width:" . $row['dna_segment_length'] . "px; height:auto;font-family: Delicious, sans-serif;font-size:16px;color:" . $row['colour'] . ";text-align:center;font-weight:bold;line-height:1.4;float:left;'>" . $row['dna_segment_type'] . "</div>

<div style='width:" . $row['dna_segment_length'] . "px;height:12px;background:" . $row['colour'] . "; float:left'></div>";
}
echo "</div></div>";
?>

【问题讨论】：

CSS 元素不透明度通过子元素成倍增加，因此它将影响 div 内的所有子元素。参考这个stackoverflow.com/questions/2561460/… js淡出也会淡出div及其所有内部内容。
嗯，这就是我期望发生的事情，但看起来它正在应用于父 div，因为所有具有除“P”之外的数据值的嵌套 div 都被淡出。
此页面对此进行了修复，但并不美观。 impressivewebs.com/…
@peter umm 只是担心您的带有 data-type="" attr 的 div 标签没有关闭 div。
在整理示例时不小心省略了...它们存在于 php 生成的 div 中...

标签： jquery

【解决方案1】：

缺少关闭 div 会导致 js 元素选择器出现问题。

【讨论】：

【解决方案2】：

您的代码是正确的，但我没有机会调试它，但这里有一个快速的解决方案。我认为您可以按照 css 行解决它

div[data-type="P"]{opacity:0.5;}

祝你有美好的一天！

【讨论】：

【解决方案3】：

响应如何？

$('*[data-type="P"]').css({opacity, 0.5});

将分别影响具有特定数据属性的所有元素。

【讨论】：

这将应用于所有的 div，而不仅仅是数据值为 'P' 的 div
啊问题似乎在于格式：它需要是： $('*[data-type="P"]').css('opacity', 0.5) ; 这是一个有效的小提琴：jsfiddle.net/K4Hg8
不，不透明度适用于所有嵌套的 div，而不仅仅是数据值“P”。请参阅 OP 进行编辑。