仅使用 jQuery 或 Javascript 刷新 div

Question

我已经浏览了很多关于这个的帖子，但我找不到任何适合我的东西。

我正在尝试仅刷新 div 部分没有 PHP 文件。我编码的语言是 Javascript、jQuery、Bootstrap 和 CSS。

这是我要刷新的部分 https://stackoverflow.com/a/58207615/5413196

是的，这是我的帖子，我只是不想重新创建相同的信息...

因为在一组图像中有一个拆分功能，如果您单击它，第一个图像会排在所有图像的后面。

示例数组 = [1,2,3,4] 用户点击 [2,3,4,1] 但 DOM 请求仅在该部分加载一次，并且在用户点击第二次点击后不会返回[3,4,1,2] 后面的第二张图片

我知道 DOM 只加载一次，但如果我能找到一种使用 Javascript 或 jQuery 的方法来刷新 div 单击或 X 秒后自动刷新以便用户可以单击图像，我会非常喜欢它又...

提供背景，包括您已经尝试过的内容

Scowered the whole StackOverflow for answers

我尝试了一些刷新代码

Refresh DIV With Javascript Button

Refresh only one div with AJAX

div refresh without click of the button

Refresh div without load

refresh only one div

Onclick refresh only div

任何帮助都会很棒

提前致谢 法兹

编辑

我被要求添加其他帖子中的代码。

let image_arr = [{
    id: 'part_1',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444517',
    h6_tag: 'Bradley Hunter',
    p_tag: 'Based in Chicago. I love playing tennis and loud music.',
    pin: 'a',
  },
  {
    id: 'part_2',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444516',
    h6_tag: 'Marie Bennet',
    p_tag: 'Currently living in Colorado. Lover of art, languages and travelling.',
    pin: 'b',
  },
  {
    id: 'part_3',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444515',
    h6_tag: 'Diana Wells',
    p_tag: 'Living in Athens, Greece. I love black and white classics, chillout music green tea.',
    pin: 'c',
  },
  {
    id: 'part_4',
    image_src: 'http://placeimg.com/100/100/animals?t=1570040444514',
    h6_tag: 'Christopher Pierce',
    p_tag: 'Star Wars fanatic. I have a persistent enthusiasm to create new things.',
    pin: 'd',
  },
];

$(document).ready(function () {
  // create
  createPartnerRow(image_arr);
  // set image background
})

$(document).ready(function () {
  $("[id^=part_]").hover(function (image_arr) {
      $(this).addClass('border')
    },
    function () {

    });
});

$("[id^=part_]").ready(function () {
  $("[id^=part_]").click(function () {
    $(this).removeClass('border')
    // set value
    var current_partner = image_arr[0];
    // remove first element from array
    image_arr = image_arr.splice(1, 4);
    // append current_partner to end of array
    image_arr.push(current_partner);
    // clear the row of all partners;
    $('#part_1, #part_2, #part_3, #part_4').remove();
    // recreate row
    console.log(image_arr);
    createPartnerRow(image_arr);
  });
})


function createPartnerRow(image_arr) {
  for (i = 0; i < image_arr.length; i++) {
    $('#partner_row').append(
      '<div class="col-md-3 col-sm-6 p-3" id="' + image_arr[i].id + '">' +
      '<button class="border-0 bg-white">' +
      '<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + image_arr[i].image_src + '"' + '/><span class="pin">' + image_arr[i].pin + '</span></div>' +
      '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + image_arr[i].h6_tag + '</h6>' +
      '<p class="text-center g-mt-50 pt-2">' + image_arr[i].p_tag + '</p>' +
      '</button>' +
      '</div>'
    )
  }
}

#partner_row {display:flex;}
.bg-white {background: transparent;}
.facebox{
position:relative;
display:inline-block; margin:auto;
width:80px; font-size:0;
}
.facebox .rounded-circle{
width:100%; border-radius:50%;
}
.facebox .pin {
display:block;
width:22px;
height:22px;
border:3px solid white;
border-radius:50%;
background:blue;
position:absolute;
bottom:-3px;
right:-3px;
  color:white; text-align:center; font-size:13px; line-height:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="partner_row"></div>

Answer 1

如果你想对一个漂亮的 DOM 系统感到惊讶，请尝试 React...但是...对于您正在寻找的内容：您是否尝试过更改 innerHTML。

-因此您使用 onclick 函数定位元素（在 JS 中添加事件监听器或在 HTML 中添加 onclick） -然后你给你的div一个像<div id="myDiv"></div>这样的ID - 然后在您使用的 onclick 目标函数/事件侦听器目标函数中：

document.getElementById("myDiv").innerHTML = 
`<div>` +
`  <p>write whatever html you want in here</P>` +
`</div>`;

您不需要重新加载整个 DOM，只需更改所需元素的 innerHTML。有几种方法可以做到这一点，但我认为这可能是你最好的选择。让我知道它是如何工作的。

Answer 2

正如所写，'#part_1、#part_2、#part_3、#part_4 元素（连同它们的悬停和单击事件处理程序）被销毁，然后在每次旋转时重新渲染。

因此第二次和后续的点击不起作用。

有很多方法可以解决这个问题：

1. 重新渲染后重新附加事件处理程序。
2. 将事件处理委托给静态容器#partner_row。
3. 渲染一次#partner_row，然后通过 DOM 操作以非破坏性方式旋转图像，确保事件处理程序保持连接状态。

方法 3 的另一个优点是比旋转数组和从头重新渲染要高效得多。这是完整的：

$(function () {
    var $partnerRow = $('#partner_row');

    // Render partners as a side effect of mapping image_arr to an array of jQuery objects,
    // then wrap to make a jQuery set.
    $(image_arr.map(function(imgData) {
        $('<div class="col-md-3 col-sm-6 p-3" id="' + imgData.id + '">' +
        '<button class="border-0 bg-white">' +
        '<div class="facebox"><img class="rounded-circle img-fluid mx-auto d-block" src="' + imgData.image_src + '"' + '/><span class="pin">' + imgData.pin + '</span></div>' +
        '<h6 class="text-center g-mt-50 font-weight-bold pt-2">' + imgData.h6_tag + '</h6>' +
        '<p class="text-center g-mt-50 pt-2">' + imgData.p_tag + '</p>' +
        '</button>' +
        '</div>').appendTo($partnerRow);
    }))
    .hover(function() { // permanently attach event handlers to the rendered elements
        $(this).addClass('border');
    }, function () {
        // $(this).removeClass('border'); // ???
    }).on('click', function () {
        $(this).removeClass('border');
        // rotate images non-destructively by DOM manipulation
        $partnerRow.find('.col-md-3.col-sm-6.p-3').eq(0).appendTo($partnerRow); // selector may simplify.
    });
});