使用jQuery

时间:2018-03-21 12:24:40

标签: javascript jquery html

我在使用jQuery覆盖特定父类的元素时遇到了一些麻烦。例如,我有两个具有相同名称的类,但我只希望将第一个实例用于特定目的,然后将其他实例用于其他目的,但内部数据仍然被我正在使用的下一个函数覆盖。我想我知道为什么会这样做,我只是不确定如何修复它所以它没有。

这是我的jQuery代码:

function buildFriendStatus() {
    $.getJSON('/members/feed/get-friend-status', function(data) {
        var notFirstElement = $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:not(first)')

        $.each(data, function(i, item) {
            var element = notFirstElement.eq(i);

            element.find('h4').html(data[i].username);
            element.find('p').html(data[i].status);
            element.find('img').attr('src', data[i].images);
        });
    }).fail(function(response) {
        console.log(response.fail);
    }); 
}


function buildSelfStatus() {
    $.getJSON('/members/feed/list-own-status', function(data) {
        $.each(data, function(i, item) {
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('h4').html(data[i].username);
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('p').html(data[i].status);
            $('.w3-container.w3-card-2.w3-white.w3-round.w3-margin:first').find('img').attr('src', data[i].images);
        });
    }).fail(function(response) {
        console.log(response.fail);
    });
}

setInterval(function() {
    buildFriendStatus();
}, 1000);

然后是html /调用函数

<script type="text/javascript">
        buildSelfStatus();
        buildFriendStatus();
</script>

<!-- always have this first (sticky) for the user status -->
<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px;">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo $this->identity() . "'s image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>
</div>


<div class="w3-container w3-card-2 w3-white w3-round w3-margin">
    <h4></h4>

    <p></p>

    <div class="w3-row-padding" style="margin: 0 -16px">
        <div class="w3-half">
            <img src="" style="width: 100%; height: 200px;" alt="<?php echo "Image"; ?>" class="w3-margin-bottom w3-round w3-border">
        </div>
    </div>

    <button type="button" class="w3-btn w3-theme-d1 w3-margin-bottom">
        <i class="fa fa-thumbs-up"></i> Like
    </button>
    <button type="button" class="w3-btn w3-theme-d2 w3-margin-bottom">
        <i class="fa fa-comment"></i> Comment
    </button>
</div>

以下是该问题的屏幕截图。

enter image description here

更新截图(显示第一张图片,但不显示其他结果)

enter image description here

任何帮助将不胜感激

谢谢!

哦,另外请注意,是否有一种方法可以使用jQuery将数据放入类中,但是如果不覆盖之前添加的数据但是只有一个<div>元素,则可以多次显示该类名称?有点像附加的截图,但不是同时覆盖每个类。只是好奇,因为我找不到任何关于这个。我想我的意思是根据通过$.getJSON检索的结果动态构建div元素及其子元素。

2 个答案:

答案 0 :(得分:0)

$(".getfirst").click(function(){
	alert($(".testdiv").first().text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testdiv">
33
</div>
<div class="testdiv">
44
</div>
<div class="testdiv">
55
</div>
<div class="testdiv">
66
</div>
<div class="getfirst" style="width:150px; height:50px; background-color:red;">
  get me!!
</div>

为什么不使用jQuery的.first()?

例如,假设你有4个具有相同类的div,但是你想获得具有特定类名的第一个div元素的文本:

<div class="testdiv">33</div>
<div class="testdiv">44</div>
<div class="testdiv">55</div>
<div class="testdiv">66</div>

<div class="getfirst" style="width:150px; height:50px; background-color:red;">
  get me!!
</div>


$(".getfirst").click(function(){
    alert($(".testdiv").first().text());
});

答案 1 :(得分:-1)

刚刚在第一个元素中添加了另一个类。