我正在尝试将一个列表项从一个列表添加到另一个列表。我试图通过将鼠标悬停在每个单独的列表项上并显示“添加到购物车”按钮来实现此目的。我的代码目前设置的方式是，如果我在左侧列表中的任何项目上按“添加到购物车”，则只有选中的项目时，每个项目都会添加到右侧列表中。
这是我用来获取文本并将其显示在另一个列表中的当前代码片段。我试图找出在这里要改变的内容，只显示一个列表项。
$(".items").on("click", ".add-to-cart", function (){
$(".cart-items").children(".cart").addClass("cart-show");
});
这是整个代码的小提琴： http://jsfiddle.net/msbpo5yg/
答案 0 :(得分：2)
将您的代码更改为
$(".items").on("click", ".add-to-cart", function (){
$(".cart-items").children('.cart').eq($(this).closest('.list').index()).addClass("cart-show");
});
答案 1 :(得分：1)
您还可以尝试更多更改，例如
string strValues = string.Empty;
foreach (var item in CheckBox1.SelectedItems)
{
if (item.Selected)
{
strValues += item.SelectedValue + ",";
}
}
$(function () {
// ADD ITEMS TO LIST BY PRESSING ENTER
$("input[name='list-name']").keydown(function (e) {
/*
var key = e.which;
if(key === 13) {
//alert("made it here too");
//event.preventDefault();
$("input[name='list-button']").click();
}
*/
});
$(".button-input").click(function () {
var listInput = $("input[name='list-name']").val().trim();
//console.log(listInput);
if (listInput === "") {
alert("Enter a list item.");
} else {
// APPEND NEW LIST ITEMS TO THE LIST
var addBtn = "<span class='btns'><span class='add-to-cart'>Add to Cart</span>";
var removeBtn = "<span class='remove-from-list'>Remove</span></span><br>";
var eachListItem = "<span class='list-items'>" + listInput + "</span><br>";
var listItem = "<p class='list'>" + eachListItem + " " + addBtn + " " + removeBtn + "</p>";
$(".items").append(listItem);
$("input[name='list-name']").val("").focus();
}
});
// ADD ITEMS TO MY CART SIDE/MY LIST SIDE
$(".items").on("click", ".add-to-cart", function () {
var $this = $(this),
$list = $this.closest('.list');
$("<p class='cart cart-show'></p>").html($list.find('.list-items').clone()).appendTo('.cart-items');
$list.addClass('added');
});
$(".items").on("click", ".remove-from-list", function () {
$(this).closest(".list").remove();
});
// SHOW/HIDE THE BUTTONS PER ITEM ADDED
$(".items").on("mouseenter", ".list:not(.added)", function () {
$(this).children(".btns").addClass("btns-show");
});
$(".items").on("mouseleave", ".list", function () {
$(this).children(".btns").removeClass("btns-show");
});
// DELETE THE ITEMS IN MY LIST SIDE
$(".items-list").on("click", ".remove-from-list", function () {
$(this).closest(".list").remove();
});
// CLEAR CART LIST
$(".remove-from-cart").click(function () {
$(".cart-items").empty();
$('.items .list.added').removeClass('added')
});
});/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio, canvas, progress, video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden], template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active, a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b, strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code, kbd, pre, samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button, input, optgroup, select, textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button, select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button, html input[type="button"],
/* 1 */
input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
}
/********** MAIN STYLES **********/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-size: 16px;
font-family:'Oxygen', sans-serif;
letter-spacing: 0.03em;
-webkit-font-smoothing: antialiased;
}
* {
/*border: 1px solid red;*/
}
.container {
background: #fff;
padding: 1.5%;
margin: 2em;
border: 3px solid black;
overflow: auto;
}
.container-input {
width: 100%;
border-top: 2px solid black;
overflow: auto;
}
.list-section {
width: 100%;
overflow: auto;
}
.shopping-header {
text-align: center;
background: lightgray;
}
.list-header {
font-size: small;
text-align: center;
color: #424242;
background: #AEAEAE;
}
.cart-header {
font-size: small;
text-align: center;
color: #424242;
background: #CC8E8E;
}
h1, h2 {
font-family:'Hammersmith One', sans-serif;
margin-top: 0;
}
h1 {
font-size: 3rem;
margin: 0;
padding: 1.15em;
}
button {
font-family:'Hammersmith One', sans-serif;
}
.remove-from-list, .remove-from-cart, .text-input, .items, .cart-items {
text-transform: uppercase;
}
.small-text {
font-size: small;
text-align: center;
padding-top: 0.5em;
padding-bottom: 0.75em;
}
.list-input {
width: 60%;
float: left;
padding: 1em;
text-align: center;
}
.button {
width: 40%;
float: left;
padding: 1em;
}
.text-input {
border: 1.5px solid black;
width: 80%;
height: auto;
padding: 0.5em;
}
.button-input {
width: 7em;
height: auto;
padding: 0.5em 0;
border-radius: 5px;
}
.list-items {
text-align: center;
word-wrap: break-word;
}
.items, .cart-items {
width: 100%;
overflow: auto;
}
.on-list {
width: 45%;
background: #dadada no-repeat;
margin-left: 2.5%;
margin-top: 2.5%;
padding: 5px;
float: left;
}
.in-cart {
width: 45%;
background: #FFB2B2 no-repeat;
margin-right: 2.5%;
margin-top: 2.5%;
padding: 5px;
float: right;
}
.btns {
width: 100%;
font-weight: 600;
font-size: small;
margin-top: 10px;
display: none;
}
.btns-show {
display: inline-block;
}
.add-to-cart, .remove-from-list {
font-size: small;
font-weight: 600;
cursor: pointer;
}
.add-to-cart {
color: blue;
float: left;
}
.remove-from-list {
color: red;
float: right;
}
.remove-from-cart {
font-size: small;
font-weight: 600;
color: red;
text-align: right;
cursor: pointer;
}
.add-to-list {
text-align: right;
float: right;
}
.cart {
color: #5e5e5e;
text-decoration: line-through;
display: none;
}
.cart-show {
display: inline-block;
}
@media (max-width: 650px) {
h1 {
font-size: 1.75rem;
}
.list-input, .button {
width: 100%;
}
.button {
text-align: center;
}
.button-input {
width: 60%;
}
.on-list, .in-cart {
width: 100%;
margin: 10px auto;
}
}
@media (max-width: 400px) {
h1 {
font-size: 1rem;
}
.text-input, .button-input, .add-to-cart, .remove-from-list, .remove-from-cart {
width: 100%;
}
.add-to-cart, .remove-from-list, .remove-from-cart {
text-align: center;
}
.on-list, .in-cart {
width: 100%;
margin: 10px auto;
}
.container-input {
border-top: none;
}
}