2023年7月18日 14:37:26go评论72阅读模式

英文:

how to delete specific image using jquery in sortable jquery

问题

我有一个HTML中的图像部分，其中图像以网格形式显示，用户可以拖动和重新排列，根据重新排列，图像名称存储在隐藏的输入框中，这部分代码如下：

<!-- 开始代码片段: js 隐藏: false 控制台: true Babel: false -->

<!-- 语言: lang-js -->
$(function () {
  $("#imageListId").sortable({
    update: function (event, ui) {
      getIdsOfImages();
    }, //end update
  });
});

function getIdsOfImages() {
  var values = [];
  $(".listitemClass").each(function (index) {
    values.push($(this).attr("id").replace("im", ""));
  });
  $("#outputvalues").val(values);
}

<!-- 语言: lang-css -->
/* 图像尺寸 */

.listitemClass img {
  height: 200px;
  width: 100%;
}
/* imagelistId 样式 */

#imageListId {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#imageListId div {
  margin: 0 4px 4px 4px;
  padding: 0.4em;
  display: inline-block;
}
/* 输出顺序样式 */

#outputvalues {
  margin: 0 2px 2px 2px;
  padding: 0.4em;
  padding-left: 1.5em;
  width: 250px;
  border: 2px solid dark-green;
  background: gray;
}

.listitemClass {
  border: 1px solid #006400;
  width: 25%;
}

.height {
  height: 10px;
}

<!-- 语言: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<b>拖放图像以排列</b>
<div class="height"></div><br>
<div id="imageListId" style="display:flex">
  <div id="im1" class="listitemClass">
    <img src="https://picsum.photos/id/237/200/300" alt="">
  </div>
  <div id="im2" class="listitemClass">
    <img src="https://picsum.photos/id/230/200/300" alt="">
  </div>
  <div id="im3" class="listitemClass">
    <img src="https://picsum.photos/id/235/200/300" alt="">
  </div>
  <div id="im4" class="listitemClass">
    <img src="https://picsum.photos/id/233/200/300" alt="">
  </div>
</div>
<form action="" method="post" enctype="multipart/form-data" style="margin-top:3%">
  <div id="outputDiv">
    <input id="outputvalues" type="hidden" value="" name="nname" />
    <input type="hidden" value="<?=$nname1?>" name="nname1" />
  </div>
  <button type="submit" name="editcategory" class="btn btn-primary">保存</button>
</form>

<!-- 结束代码片段 -->

我想从此网格中删除某些特定图像，请告诉我如何实现这一点，提前感谢。

英文:

I have an image section in html, where images are shown as grid and user can drag and rearrange, according to the rerrangement the image names are stored in the hidden input box, this is working fine, my code is like below:

$(function () {
$(&quot;#imageListId&quot;).sortable({
update: function (event, ui) {
getIdsOfImages();
}, //end update
});
});
function getIdsOfImages() {
var values = [];
$(&quot;.listitemClass&quot;).each(function (index) {
values.push($(this).attr(&quot;id&quot;).replace(&quot;im&quot;, &quot;&quot;));
});
$(&quot;#outputvalues&quot;).val(values);
}

/* image dimension */
.listitemClass img {
height: 200px;
width: 100%;
}
/* imagelistId styling */
#imageListId {
margin: 0;
padding: 0;
list-style-type: none;
}
#imageListId div {
margin: 0 4px 4px 4px;
padding: 0.4em;
display: inline-block;
}
/* Output order styling */
#outputvalues {
margin: 0 2px 2px 2px;
padding: 0.4em;
padding-left: 1.5em;
width: 250px;
border: 2px solid dark-green;
background: gray;
}
.listitemClass {
border: 1px solid #006400;
width: 25%;
}
.height {
height: 10px;
}

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
&lt;b&gt;Drag and drop images to arrange&lt;/b&gt;
&lt;div class=&quot;height&quot;&gt;&lt;/div&gt;&lt;br&gt;
&lt;div id=&quot;imageListId&quot; style=&quot;display:flex&quot;&gt;
&lt;div id=&quot;im1&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/237/200/300&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;im2&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/230/200/300&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;im3&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/235/200/300&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;div id=&quot;im4&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/233/200/300&quot; alt=&quot;&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;form action=&quot;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; style=&quot;margin-top:3%&quot;&gt;
&lt;div id=&quot;outputDiv&quot;&gt;
&lt;input id=&quot;outputvalues&quot; type=&quot;hidden&quot; value=&quot;&quot; name=&quot;nname&quot; /&gt;
&lt;input type=&quot;hidden&quot; value=&quot;&lt;?=$nname1?&gt;&quot; name=&quot;nname1&quot; /&gt;
&lt;/div&gt;
&lt;button type=&quot;submit&quot; name=&quot;editcategory&quot; class=&quot;btn btn-primary&quot;&gt;SAVE&lt;/button&gt;
&lt;/form&gt;

i want to delete some specific image from this grid, please tell me how do i accomplish this, thanks in advance

答案1

得分: 2

你需要重置可排序组件：

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->
$(function() {
  const getIdsOfImages = () => {
    const values = $('.listitemClass').map(function() {
      return this.id.replace('im', '')
    }).get();
    $('#outputvalues').val(values);
  };
  const init = () => {
    $('#imageListId').sortable({
      update: getIdsOfImages
    });
    getIdsOfImages();
  }
  $('.delete').on('click', function() {
    $(this).closest('.listitemClass').remove();
    init();
  })
  init();
});

<!-- language: lang-css -->
/* 图片尺寸 */
.listitemClass img {
  height: 200px;
  width: 100%;
}

/* imagelistId 样式 */
#imageListId {
  margin: 0;
  padding: 0;
  display:flex;
}

#imageListId div {
  margin: 0 4px 4px 4px;
  padding: 0.4em;
  display: inline-block;
}

/* 输出顺序样式 */
#outputvalues {
  margin: 0 2px 2px 2px;
  padding: 0.4em;
  padding-left: 1.5em;
  width: 250px;
  border: 2px solid dark-green;
  background: gray;
}

.listitemClass {
  border: 1px solid #006400;
  width: 25%;
}

.height {
  height: 10px;
}

<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<b>拖拽图像以排列</b>
<div class="height"></div><br>
<div id="imageListId">
  <div id="im1" class="listitemClass">
    <img src="https://picsum.photos/id/236/200/300" alt="Image 1">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
  <div id="im2" class="listitemClass">
    <img src="https://picsum.photos/id/237/200/300" alt="Image 2">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
  <div id="im3" class="listitemClass">
    <img src="https://picsum.photos/id/238/200/300" alt="Image 3">
    <button type="button" class="btn btn-primary delete">X</button>
  </div>
</div>
<form action="" method="post" enctype="multipart/form-data" style="margin-top:3%;">
  <div id="outputDiv">
    <input id="outputvalues" type="text" value="" name="nname" />
    <input type="hidden" value="1" name="nname1" />
  </div>
</form>

<!-- end snippet -->

这是你提供的代码的翻译。如果有其他需要，请随时告诉我。

英文:

You need to reset the sortable:

$(function() {
const getIdsOfImages = () =&gt; {
const values = $(&#39;.listitemClass&#39;).map(function() {
return this.id.replace(&#39;im&#39;, &#39;&#39;)
}).get();
$(&#39;#outputvalues&#39;).val(values);
};
const init = () =&gt; {
$(&#39;#imageListId&#39;).sortable({
update: getIdsOfImages
});
getIdsOfImages();
}
$(&#39;.delete&#39;).on(&#39;click&#39;, function() {
$(this).closest(&#39;.listitemClass&#39;).remove();
init();
})
init();
});

/* image dimension */
.listitemClass img {
height: 200px;
width: 100%;
}
/* imagelistId styling */
#imageListId {
margin: 0;
padding: 0;
display:flex;
}
#imageListId div {
margin: 0 4px 4px 4px;
padding: 0.4em;
display: inline-block;
}
/* Output order styling */
#outputvalues {
margin: 0 2px 2px 2px;
padding: 0.4em;
padding-left: 1.5em;
width: 250px;
border: 2px solid dark-green;
background: gray;
}
.listitemClass {
border: 1px solid #006400;
width: 25%;
}
.height {
height: 10px;
}

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
&lt;b&gt;Drag and drop images to arrange&lt;/b&gt;
&lt;div class=&quot;height&quot;&gt;&lt;/div&gt;&lt;br&gt;
&lt;div id=&quot;imageListId&quot;&gt;
&lt;div id=&quot;im1&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/236/200/300&quot; alt=&quot;Image 1&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary delete&quot;&gt;X&lt;/button&gt;
&lt;/div&gt;
&lt;div id=&quot;im2&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/237/200/300&quot; alt=&quot;Image 2&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary delete&quot;&gt;X&lt;/button&gt;
&lt;/div&gt;
&lt;div id=&quot;im3&quot; class=&quot;listitemClass&quot;&gt;
&lt;img src=&quot;https://picsum.photos/id/238/200/300&quot; alt=&quot;Image 3&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary delete&quot;&gt;X&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;form action=&quot;&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; style=&quot;margin-top:3%&quot;&gt;
&lt;div id=&quot;outputDiv&quot;&gt;
&lt;input id=&quot;outputvalues&quot; type=&quot;text&quot; value=&quot;&quot; name=&quot;nname&quot; /&gt;
&lt;input type=&quot;hidden&quot; value=&quot;1&quot; name=&quot;nname1&quot; /&gt;
&lt;/div&gt;
&lt;/form&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何使用jQuery在可排序的jQuery中删除特定图像。

问题

答案1

Laravel 使用 Jetstream 和 Vue.js 将用户角色发送到每个路由。

Chrome浏览器在WebdriverIO中无法打开。

什么是在setAttribute/getAttribute中需要转义的字符？

在Node.js中为文件输出添加换行字符。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论