Javascript 使用jquery在一个列表中隐藏文本值，而在另一个列表中显示其值

我正在尝试将一个列表项从一个列表添加到另一个列表。我试图通过将鼠标悬停在每个单独的列表项上并显示“添加到购物车”按钮来实现这一点。我的代码当前的设置方式是，如果我在左侧列表中的任何项目上按“添加到购物车”，则当仅显示选定的项目时，每个项目都将添加到右侧列表中

下面是我用来抓取文本并将其显示在其他列表中的当前代码。我正在试图弄清楚要在这里更改什么以只显示一个列表项

$(".items").on("click", ".add-to-cart", function (){
    $(".cart-items").children(".cart").addClass("cart-show");
});

下面是整个代码的一部分： 将代码更改为

$(".items").on("click", ".add-to-cart", function (){
    $(".cart-items").children('.cart').eq($(this).closest('.list').index()).addClass("cart-show");
});

---

您还可以尝试其他一些更改，如

$（函数（）{
//按ENTER键将项目添加到列表中
$（“输入[name='list-name']）。向下键（函数（e）{
/*
var-key=e.which；
如果（键===13）{
//警惕（“也在这里制造”）；
//event.preventDefault（）；
$（“输入[name='list-button']）。单击（）；
}
*/
});
$（“.button input”）。单击（函数（）{
var listInput=$（“输入[name='list-name']”）val（）.trim（）；
//日志（listInput）；
如果（listInput==“”）{
警报（“输入列表项”）；
}否则{
//将新列表项附加到列表中
var addBtn=“添加到购物车”；
var removeBtn=“删除
”；
var eachListItem=“”+listInput+“
”；
var listItem=“
”+eachListItem+“”+addBtn+“”+removeBtn+”
”；
$（“.items”）.append（列表项）；
$（“输入[name='list-name'].val（“”.focus（））；
}
});
//将项目添加到我的购物车侧/我的列表侧
$（“.items”）。在（“单击”，“添加到购物车”，函数（）{
变量$this=$（this），
$list=$this.closest（'.list'）；
$（“
”）.html（$list.find（'.list items'）.clone（））.appendTo（'.cart items'）；
$list.addClass（'added'）；
});
$（“.items”）。在（“单击”，“从列表中删除”，函数（）{
$（this）.closest（“.list”）.remove（）；
});
//显示/隐藏每个添加项目的按钮
$（“.items”）。在（“.mouseenter”，”.list:not（.added）”，函数（）{
$（this.children（“.btns”）.addClass（“btns show”）；
});
$（“.items”）。在（“mouseleave”，“.list”，函数（）{
$（this.children（“.btns”）.removeClass（“btns show”）；
});
//删除我的列表中的项目
$（“.items list”）。在（“单击”，“从列表中删除”，函数（）{
$（this）.closest（“.list”）.remove（）；
});
//清除购物车列表
$（“.remove from cart”）。单击（函数（）{
$（“.cart items”）.empty（）；
$（'.items.list.added'）.removeClass（'added'））
});
});
/*！normalize.css v3.0.2 | MIT License | git.io/normalize*/
/**
* 1. 将默认字体系列设置为无衬线。
* 2. 防止在方向更改后调整iOS文本大小，而不禁用
*用户缩放。
*/
html{
字体系列：无衬线；
/* 1 */
-ms文本大小调整：100%；
/* 2 */
-webkit文本大小调整：100%；
/* 2 */
}
/**
*删除默认保证金。
*/
身体{
保证金：0；
}
/*HTML5显示定义
========================================================================== */
/**
*IE 8/9中没有为任何HTML5元素定义正确的“块”显示。
*IE 10/11中未为“详细信息”或“摘要”定义正确的“块”显示
*还有Firefox。
*IE 11中未为'main'定义正确的'block'显示。
*/
文章、旁白、详细信息、图表、页脚、页眉、H组、主菜单、菜单、导航、章节、摘要{
显示：块；
}
/**
* 1. IE 8/9中未定义正确的“内联块”显示。
* 2. 规范Chrome、Firefox和Opera中“progress”的垂直对齐。
*/
音频、画布、进度、视频{
显示：内联块；
/* 1 */
垂直对齐：基线；
/* 2 */
}
/**
*阻止现代浏览器在没有控件的情况下显示“音频”。
*移除iOS 5设备中的多余高度。
*/
音频：非（[控制]）{
显示：无；
身高：0；
}
/**
*地址“[hidden]”IE 8/9/10中不存在样式。
*在IE 8/9/11、Safari和Firefox<22中隐藏'template'元素。
*/
[隐藏]，模板{
显示：无；
}
/*链接
========================================================================== */
/**
*删除IE 10中活动链接的灰色背景色。
*/
a{
背景色：透明；
}
/**
*提高聚焦时的可读性，并且在所有浏览器中鼠标悬停。
*/
a:活动，a:悬停{
大纲：0；
}
/*文本级语义
========================================================================== */
/**
*地址样式在IE 8/9/10/11、Safari和Chrome中不存在。
*/
缩写[标题]{
边框底部：1个点；
}
/**
*在Firefox4+、Safari和Chrome中，地址样式设置为“粗体”。
*/
b、 强壮的{
字体大小：粗体；
}
/**
*地址样式在Safari和Chrome中不存在。
*/
dfn{
字体：斜体；
}
/**
*地址变量'h1`在'section'和'article'中的字体大小和边距`
*Firefox4+、Safari和Chrome中的上下文。
*/
h1{
字号：2em；
利润率：0.67em0；
}
/**
*地址样式在IE 8/9中不存在。
*/
标记{
背景：#ff0；
颜色：#000；
}
/**
*解决所有浏览器中字体大小不一致和可变的问题。
*/
小的{
字号：80%；
}
/**
*防止'sub'和'sup'影响所有浏览器中的'line height'。
*/
副秘书{
字体大小：75%；
线高：0；
位置：相对位置；
垂直对齐：基线；
}
苏普{
顶部：-0.5em；
}
潜艇{
底部：-0.25em；
}
/*嵌入内容
========================================================================== */
/**
*在IE 8/9/10中的'a'元素内删除边框。
*/
img{
边界：0；
}
/**
*IE 9/10/11中未隐藏正确的溢出。
*/
svg:not（：root）{
溢出：隐藏；
}
/*分组内容
===========