Question

我无法根据点击列表项的按钮来切换（显示/隐藏）div。

当我尝试时，它会立即影响所有div。这是我的代码。我希望每个项目的基础都能改变。

<div class="list-item">
    <div class="list-content">
        <div class="list-updates">
            <a href="#" class="list-avatar"><img
                        src="images/avatar/avatar_<?php echo ( $i <= 8 ? '0' : NULL ) . $avatars[ $i ] ?>.jpg"
                        alt="user-avatar" width="40"
                        height="40"></a>
            <a href="#"><i class="material-icons"><?php echo get_icon( $update[ $i ] ) ?></i></a>
        </div>
        <div class="item-title"><a href="#"><?php echo $questions[ $i ] ?></a>
        </div>
        <div class="ans-box">
            <div class="ans-count"><?php echo $ans[ $i ] ?></div>
            <span><i class="material-icons meta-info-btn">keyboard_arrow_down</i></span>
        </div>
    </div>

    <div class="metas">
        <div class="update-info"><a href="#">commented</a> 1 hour ago in <a href="#">Plugins</a> by
            <a href="#">gurjyot</a>
        </div>
        <div class="counters">
            <span class="votes"><i class="material-icons">arrow_upward</i> +1245</span>
            <span class="views"><i class="material-icons">remove_red_eye</i> 50.2k</span>
        </div>
    </div>
</div><!-- list-item -->

$('.list-content .meta-info-btn').click(function () {
    alert('Clicked and found!');
    $(this).closest('.metas').slideToggle();
});

Answer 1

试试这个

＆＃13;

$sql= "INSERT INTO dailyrecord (id,babydiaper,babylotion,hairremover,neemfw,neetfw) VALUES ($id,'$Diaper','$BabyLotion','$Neem_fw','$Facewash','$Hair_remover')";

＆＃13;

$('.list-content .meta-info-btn').click(function () {
    var id = $(this).parent().attr('class');
    alert(id);
    $('#'+id).slideToggle();
});

＆＃13;

Answer 2

试试这个

$('.list-content .meta-info-btn').click(function () {
    $(this).parents('.list-content').next('.metas').slideToggle(); 
});

＆＃13;

$('.list-content .meta-info-btn').click(function () {
    
    $(this).parents('.list-content').next('.metas').slideToggle(); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-item">
    <div class="list-content">
        <div class="list-updates">
            <a href="#" class="list-avatar"><img
                        src="images/avatar/avatar_<?php echo ( $i <= 8 ? '0' : NULL ) . $avatars[ $i ] ?>.jpg"
                        alt="user-avatar" width="40"
                        height="40"></a>
            <a href="#"><i class="material-icons"><?php echo get_icon( $update[ $i ] ) ?></i></a>
        </div>
        <div class="item-title"><a href="#"><?php echo $questions[ $i ] ?></a>
        </div>
        <div class="ans-box">
            <div class="ans-count"><?php echo $ans[ $i ] ?></div>
            <span><i class="material-icons meta-info-btn">keyboard_arrow_down</i></span>
        </div>
    </div>

    <div class="metas">
        <div class="update-info"><a href="#">commented</a> 1 hour ago in <a href="#">Plugins</a> by
            <a href="#">gurjyot</a>
        </div>
        <div class="counters">
            <span class="votes"><i class="material-icons">arrow_upward</i> +1245</span>
            <span class="views"><i class="material-icons">remove_red_eye</i> 50.2k</span>
        </div>
    </div>
    <div class="list-content">
        <div class="list-updates">
            <a href="#" class="list-avatar"><img
                        src="images/avatar/avatar_<?php echo ( $i <= 8 ? '0' : NULL ) . $avatars[ $i ] ?>.jpg"
                        alt="user-avatar" width="40"
                        height="40"></a>
            <a href="#"><i class="material-icons"><?php echo get_icon( $update[ $i ] ) ?></i></a>
        </div>
        <div class="item-title"><a href="#"><?php echo $questions[ $i ] ?></a>
        </div>
        <div class="ans-box">
            <div class="ans-count"><?php echo $ans[ $i ] ?></div>
            <span><i class="material-icons meta-info-btn">keyboard_arrow_down 1</i></span>
        </div>
    </div>

    <div class="metas">
        <div class="update-info"><a href="#">commented</a> 1 hour ago in <a href="#">Plugins</a> by
            <a href="#">gurjyot</a>
        </div>
        <div class="counters">
            <span class="votes"><i class="material-icons">arrow_upward</i> +1245</span>
            <span class="views"><i class="material-icons">remove_red_eye</i> 50.2k</span>
        </div>
    </div>
</div><!-- list-item -->

＆＃13;

Answer 3

尝试浮动到最近的顶级父div，然后使用find。

$(this).closest('.list-item').find(".metas").toggle();

＆＃13;

// add some data...

var x = "";

for(var i = 0; i < 5; i++){
  x += "<div class='list-item'>\
	<div class='list-content'>\
		<div class='list-updates'><a href='#'>img</a></div>\
		<div class='item-title'><a href='#'>Question goes here....?</a></div>\
		<div class='ans-box'>\
		  <div class='ans-count'>Answer goes here....</div>\
		  <span><i class='material-icons meta-info-btn'>hide meta </i></span>\
		</div>\
	</div>\
  <div class='metas'> META INFO HERE </div>\
</div>\
";
}

$("#contents").append(x);
// ----------------------------------

$('.list-content .meta-info-btn').click(function() {
  $(this).closest('.list-item').find(".metas").toggle();
});

＆＃13;

div {
  margin: 5px;
}
.meta-info-btn:hover {
  cursor: pointer;
}
.meta-info-btn {
  background: #CCC;
  border: 1px solid #999;
  padding: 2px;
  margin: 5px;
}

.list-item {
  margin-bottom: 10px;
  border: 1px solid black;
  padding: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="contents"></div>

＆＃13;

Answer 4

你为.meta-info-btn和.list-content单独点击事件，如下所示

    $('.meta-info-btn').click(function () {
        $(this).closest('.list-content').closest('.metas').slideToggle();
    });

    $('.list-content').click(function () {

        $(this).closest('.metas').slideToggle();
    });

jQuery show hide class by

4 个答案: