个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个普通的 div，有一个可以手动编辑的输入文本框。我想从另一个具有一组 php 数组值(来自查询)的 div 添加/删除 php 值。每个值都有一个 [添加] 或 [删除] 按钮，该按钮根据天气相应的 php 值是否存在于输入文本字段中。
所以，基本上如果文本框是空的，那么所有按钮都会是[添加]，点击它会将相应的php值添加到文本框，然后变成[删除]按钮。同样，任何[删除]按钮都会从文本框中删除相应的php值，然后更改为[添加]按钮。
EXAMPLE:
$values = array("Mike", "James", "Jerry", "Tom");
input type="text"
如果我手动对文本框进行任何更改或在其中输入一些已知的 php 值(用分号分隔):
James;Mike;Hyde;Jerry;
另一个 div 将动态搜索 php 数组的所有值，并为存在的值添加 [Remove] 按钮，为文本框中未找到的值添加 [Add] 按钮。
詹姆斯[删除]
迈克[删除]
汤姆 [添加]
杰瑞[删除]
<小时/>Notice #1: Here, 'Tom' is the only value that do not exist in the textbox, so it has a [Remove] button.
Notice #2: Also, 'Hyde' is not known as a value of the php array, so it has neither an [Add] nor a [Remove] button.
我已经做的基本上是回显 php 查询中的所有数组值，并为每个值附加一个 [Add] 按钮(因为默认情况下文本框为空)
我使用的自定义 js 函数类似于:
$("#textbox").val(function(i, val) { return val.replace(phparrayvalue, ''); });
但是，为了动态更改[添加]和[删除]之间的按钮，我必须始终保留 php 数组(AJAX 请求在textchange 上获取 php 值会很慢)。
我认为如果我可以传递 php 数组并将其转换为 javascript 数组 onload，问题就会消失。之后就可以很容易地将保存的js数组与ontextchange上的文本框值进行比较，并根据结果更改按钮。
我希望它很清楚，并且有人可以帮助编写 JavaScript 代码。
谢谢
最佳答案
如果我正确理解你的问题，这可能会有所帮助
创建简单的 html 文档进行测试..
<!DOCTYPE html>
<html>
<head>
<title>Test Add/Remove</title>
<script type="text/javascript" src="adddel.js"></script>
<style type="text/css">
<!--
body { font-family: tahoma, verdana, arial; }
.btn { color: #0000ff; font-size: 12px; cursor: pointer; }
.div1 { width: 200px; height: 200px; background-color: #ffffee; border: dashed 1px #494949; position: absolute; left: 50px; top: 50px; padding: 10px; }
.div2 { width: 200px; height: 200px; background-color: #ffffee; border: dashed 1px #494949; position: absolute; left: 280px; top: 50px; padding: 10px; font-size: 14px; }
.myinput { width: 194px; font-weight: bold; font-size: 14px; border: solid 1px #000000; padding: 3px; }
-->
</style>
</head>
<body>
<div id="divinput" class="div1"></div>
<div id="divvalues" class="div2"></div>
<script type="text/javascript">
<!--
// echo next line from php code
myArray = 'Mike,James,Jerry,Tom';
jsStart(myArray, 'divinput', 'divvalues');
-->
</script>
</body>
</html>
如您所见，此 html 包含 标题、指向外部 JavaScript 文件的链接以及 HEAD 中页面元素的一些样式 部分，以及 BODY 部分中的两个 DIV 和一些简单的页面 JavaScript。
您所要做的就是从 PHP 代码创建 JavaScript 变量 myNames。我使用了您在问题中提到的相同名称，因此我的行如下所示:
myArray = 'Mike,James,Jerry,Tom';
在 PHP 中创建逗号分隔列表并在此处回显它。
在该行后面，我调用了函数 jsStart()，该函数在外部 JavaScript 文件 adddel.js 中定义。
让我们看看该文件是什么样的
var name = Array();
// page preparation
function jsStart(a, div1id, div2id) {
// create array of names
name = a.split(',');
// create div1 html
html = '<input type="text" name="myedit" id="myedit" class="myinput" value="" onchange="changeText()" onkeyup="changeText()">';
document.getElementById(div1id).innerHTML = html;
// create div2 html
html = '';
for (i=0; i<name.length; i++) {
if (name[i].trim() != '') {
if (html != '') html += '<br />';
// name
html += '• <b>' + name[i] + '</b> ';
// button
html += ' <span class="btn" id="btn' + i + '" onclick="btnClick(' + i + ')">[Add]</span>';
}
}
if (html == '') html = ' ';
document.getElementById(div2id).innerHTML = html;
changeText();
}
// fires on input-text change
function changeText() {
edl = document.getElementById('myedit').value.trim().split(';');
for (i=0; i<name.length; i++) {
btnText = '[Add]';
for (j=0; j<edl.length; j++) {
ne = name[i].trim().toLowerCase();
nl = edl[j].trim().toLowerCase();
if (ne == nl) {
btnText = '[Remove]';
break;
}
}
document.getElementById('btn' + i).innerHTML = btnText;
}
}
// add/remove name from text-input
function btnClick(id) {
ne = name[id].trim().toLowerCase();
edl = document.getElementById('myedit').value.trim().split(';');
newed = '';
found = false;
for (i=0; i<edl.length; i++) {
nl = edl[i].trim().toLowerCase();
if (nl != '') {
if (nl != ne) newed += edl[i].trim() + ';';
else found = true;
}
}
if (!found) newed+=name[id]+';'
document.getElementById('myedit').value = newed;
changeText();
}
将这两个文件放在同一目录中，然后从浏览器中打开 test.html 文件。如果您做得正确，您将在我的帖子顶部看到类似图片的内容。
注意:文本输入中的项目不区分大小写，并且允许在名称周围添加空格。
这意味着文本
"Mike;John;Sam; BRian"
与
相同" mike ; john;Sam;Brian "
现在编辑此代码并使其满足您的需求。就这么简单。
关于php - 在 2 个 div 之间传输(添加/删除)php 数组值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11924587/
24
4
0
我的问题:非常具体。我正在尝试想出解析以下文本的最简单方法: ^^domain=domain_value^^version=version_value^^account_type=account_ty
好吧，这就是我的困境: 我正在为 Reddit 子版 block 开发常见问题解答机器人。我在 bool 逻辑方面遇到了麻烦，需要一双更有经验的眼睛(这是我在 Python 中的第一次冒险)。现在，该
它首先遍历所有 y 值，然后遍历所有 x 值。我需要 X 和 y 同时改变。 For x = 3 To lr + 1 For y = 2 To lr anyl.Cells(x, 1)
假设我有一个包含 2 列的 Excel 表格:单元格 A1 到 A10 中的日期和 B1 到 B10 中的值。 我想对五月日期的所有值求和。我有3种可能性: {=SUM((MONTH(A1:A10)=
如何转换 Z-score来自 Z-distribution (standard normal distribution, Gaussian distribution)到 p-value ?我还没有找到
我正在重写一些 Javascript 代码以在 Excel VBA 中工作。由于在这个网站上搜索，我已经设法翻译了几乎所有的 Javascript 代码!但是，有些代码我无法准确理解它在做什么。这是一
我遇到过包含日期格式的时间戳日期的情况。然后我想构建一个图表，显示“点击”项目的数量“每天”， //array declaration $array1 = array("Date" => 0); $a
我是scala的新手! 我的问题是，是否有包含成员的案例类 myItem:Option[String] 当我构造类时，我需要将字符串内容包装在: Option("some string") 要么 So
我正在用 PHP 创建一个登录系统。我需要用户使用他或她的用户名或电子邮件或电话号码登录然后使用密码。因为我知道在 Java 中我们会像 email==user^ username == user 这
我在 C++ 项目上使用 sqlite，但是当我在具有文本值的列上使用 WHERE 时出现问题 我创建了一个 sqlite 数据库: CREATE TABLE User( id INTEGER
当构造函数是显式时，它不用于隐式转换。在给定的代码片段中，构造函数被标记为 explicit。那为什么在 foo obj1(10.25); 情况下它可以工作，而在 foo obj2=10.25; 情况
我知道这是一个主观问题，所以如果需要关闭它，我深表歉意，但我觉得它经常出现，让我想知道是否普遍偏爱一种形式而不是另一种形式。 显然，最好的答案是“重构代码，这样你就不需要测试是否存在错误”，但有时没有
这两个 jQuery 选择器有什么区别？ 以下是来自 w3schools.com 的定义: [attribute~=value] 选择器选择带有特定属性，其值包含特定字符串。 [attribute*=
为什么我们需要CSS [attribute|=value] Selector根本当 CSS3 [attribute*=value] Selector基本上完成相同的事情，浏览器兼容性几乎相似？是否存在
我正在解决 regx 问题。我已经有一个像这样的 regx [0-9]*([.][0-9]{2})。这是 amont 格式验证。现在，通过此验证，我想包括不应提供 0 金额。比如 10 是有效的，但
我正在研究计算机科学 A 考试的样题，但无法弄清楚为什么以下问题的正确答案是正确的。 考虑以下方法。 public static void mystery(List nums) { for (
好的，我正在编写一个 Perl 程序，它有一个我收集的值的哈希值(完全在一个完全独立的程序中)并提供给这个 Perl 脚本。这个散列是 (string,string) 的散列。 我想通过 3 种方式对
我有一个表数据如下，来自不同的表。仅当第三列具有值“债务”并且第一列(日期)具有最大值时，我才想从第四列中获取最大值。最终值基于 MAX(DATE) 而不是 MAX(PRICE)。所以用简单的语言来说
我有一个奇怪的情况，只有错误状态保存到数据库中。当“状态”应该为 true 时，我的查询仍然执行 false。 我有具有此功能的 Controller public function change_a
我有一个交易表(针对所需列进行了简化): id client_id value 1 1 200 2 2 150 3 1
我是一名优秀的程序员,十分优秀！