Question

我正在通过ajax加载一些嵌套的div，需要通过data属性选择特定的元素。更改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）？

修改

看起来像'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>";
?>

Answer 1

缺少结束div导致问题进入js元素选择器。

Answer 2

响应如何？

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

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

Answer 3

你的代码是正确的，但我没有机会调试它，但这里是快速的解决方案。我想你可以通过跟随css行来解决它

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

度过美好的一天！

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

3 个答案: