Question

我为内容系统设置了搜索功能。用户可以发布和取消发布他的元素。每个元素都有两个关键字+条件状态= 3个关键字用于搜索总和。

每个元素都有一个属性namend“data-meta”，其中存储了三个关键字。

例如。

data-meta="banana blue public"

如果用户想要取消发布他的元素并将其设置为私有，我如何编辑最后一个值“public”？

Answer 1

实际上不改变存储这些值的方式，例如创建自定义属性，如

data-keyone="banana" data-keytwo="blue" data-state="public"

你可以拉取属性的值，拆分它，修改第三个元素，加入它，然后将属性值设置为新的字符串。

从这开始：

<myelement id="example" data-meta="banana blue public">

拉出值：

var oElem = document.getElementById("example");
var strTemp = oElem.getAttribute("data-meta"); //javascript
var strTemp = $('myelement#example').attr('data-meta'); // jquery

拆分它：

var astrVals = strTemp.split(" ");

修改第三个值：

astrVals[2] = "private";

重新加入：

strTemp = astrVals.join(" ");

然后再次设置值：

$('myelement#example').attr('data-meta', strTemp); //jquery
oElem.setAttribute("data-meta", strTemp); // javascript

Answer 2

使用jQuery编辑而不是使用javascript：

首先：

$('#anyID').removeAttr("meta-data")

后：

$('#anyID').attr("data-meta", "banana blue private")

Answer 3

我做了一些小功能，可以像功能一样切换。

第一个从属性中获取字符串并使用空格将其拆分以生成数组，下一个查看数组以查看它是否包含要切换的内容。第三个和第四个从数组中添加和删除，然后将数组作为带空格的字符串重新连接在一起。

我没有添加任何错误处理，因此如果您尝试删除不存在的属性，则会出现问题，但除此之外应该让您开始。

// take contents of attribute and return an array
function arrFromAttr(selector, attribute) {
  return selector.getAttribute(attribute).split(" ");
}

// check the array and toggle the value
function toggleAttr(selector, attribute, value) {
  let attrs = arrFromAttr(selector, attribute);

  if (attrs.includes(value)) {
    removeAttr(selector, attribute, value)
  } else {
    addAttr(selector, attribute, value)
  }
}

// add to the array and set the attribute
function addAttr(selector, attribute, value) {
  let attrs = arrFromAttr(selector, attribute);

  attrs.push(value);
  selector.setAttribute(attribute, attrs.join(' '));
}

// remove from the array and set the attribute
function removeAttr(selector, attribute, value) {
  let attrs = arrFromAttr(selector, attribute);

  attrs.splice(attrs.indexOf(value), 1);
  selector.setAttribute(attribute, attrs.join(' '));
}

// toggle the attribute on button click
document.querySelector('button').addEventListener('click', () => {
  toggleAttr(document.querySelector('[data-meta]'), "data-meta", "public");
})

div[data-meta]:after {
  content: attr(data-meta)
}

<div data-meta="banana blue public"></div>
<button>Toggle public</button>

我希望你能找到这个有用的

如果你感觉很好看，你可以拥有自己的polyfill，你可以进行切换功能，但是在你对JS有信心之前我不建议这样做。

if (!(Element.prototype.toggleAttribute || Element.prototype.deleteAttribute || Element.prototype.addAttribute)) {
  Element.prototype.toggleAttribute = function(name, value) {
    let attrs = this.getAttribute(name).split(" ");
    if (attrs.includes(value)) {
      this.deleteAttribute(name, value)
    } else {
      this.addAttribute(name, value);
    }
  }

  Element.prototype.addAttribute = function(name, value) {
    let attrs = this.getAttribute(name).split(" ");
    attrs.push(value);
    this.setAttribute(name, attrs.join(' '));
  }

  Element.prototype.deleteAttribute = function(name, value) {
    let attrs = this.getAttribute(name).split(" ");
    attrs.splice(attrs.indexOf(value), 1);
    this.setAttribute(name, attrs.join(' '));
  }
}

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('div').toggleAttribute('data-meta', 'public');
})

div[data-meta]:after {
  content: attr(data-meta)
}

<div data-meta="banana blue public"></div>
<button>Toggle public</button>

此代码将函数添加到本机代码中，因此您可以调用元素上的函数，而不必将元素作为参数传递。

在多值属性javascript中编辑一个值

3 个答案: