Question

我正在尝试制作一个简单的时间表来通知用户。当他们点击日期时，应该有某种“手风琴”系统下降并提供更多信息。当他们再次点击它时，“手风琴”再次关闭。

我已经包含了一些图片以使其更加清晰：

和

第一张图片显示了用户进入页面时看到的内容，第二张图片显示了他点击其中一个元素时所看到的内容。

目前的问题是当他点击1天时，所有信息都会显示。我不知道如何获得某种索引，所以只有那一天才会显示其隐藏的信息。

目前我有以下代码：

的JavaScript

        $counter=1;
        $(document).ready(function(){
          $(".tijdlineElement").click(function(){

            $(".tijdlineElementHidden").slideToggle("slow");

            if($counter == 1){
            getElementsByClassName("tijdlineElementHidden").style.display = "block";
            $counter = 2
            }
            else{
         getElementByClass("tijdlineElementHidden").style.display = "none";

            $counter =1
            }
          });
        });

和PHP做1天：

    echo "<div class='tijdlineElement'>";
echo "<div class='tijdlineP2Element' >" . $topic['Uur']."<br /><br />" . $topic['Beschrijving'] . "</div>";

echo "<div class='tijdlinePElement'>". $newDate . '<br />'. $newDate1 . ' '. $newDate1a . '<br />' . $newDate2 ."</div>";
echo "<img src='images/meerFase1.png'/>";


echo "</div>";
echo "<div class='tijdlineElementHidden' style='display:none;'>";
echo "<div class='tijdlineP2Element'>" . $topic['LangeBeschrijving'] . "</div>";
echo "<div class='tijdlinePElement'></div>";
echo "</div><br />";

问题是，当用户点击1个日期时，其他日子的所有信息都会被显示出来。

所以我的问题是：如何才能访问该特定div，所以只显示所选信息（被点击的div）div的信息？

Answer 1

使用$(".tijdlineElement").click(function(){ }使用当前代码您正在触发该类的所有元素上的click事件。您可以使用.each()和$(this)之类的内容将其范围限定为当前点击的元素。

$(".tijdlineElement").each(function(){
   $(this).on({
       click:function()
       {
           $(this).slideToggle("slow");
           // other click function stuff
       }
   });
});

快速演示：

http://jsfiddle.net/9v2D5/

更新了演示：

http://jsfiddle.net/9v2D5/25/

Answer 2

试试这个：

var parent = $( this );
$( ".tijdlineElementHidden", parent ).slideToggle("slow");

它应该只切换作为子元素的“tijdlineElementHidden”div到被点击的元素。

Answer 3

循环遍历所有共享相同类名的元素，如果是IE8，则为addEventListener或attachEvent。（原生JS解决方案）

var elements = document.querySelectorAll(".tijdlineElement");
var i = 0, length = elements.length;
for (i; i < length; i++) {
    if (document.addEventListener) {
        elements[i].addEventListener("click", function() {
            var element = this;
        });
    } else { // IE8 support
        elements[i].attachEvent("onclick", function() {
            var element = elements[i];
        });
    };
};

Answer 4

不使用引用类，而是使用$（this）来引用它：

 $(".tijdlineElement").click(function(){

   $(this).find(".tijdlineElementHidden").slideToggle("slow");
   .....the rest of the code...
 }

当有更多具有相同类的div时，将javaScript函数应用于1 div

4 个答案: