Question

我有一个图像网格，它以PHP函数的形式回显为HTML。图像当前具有onclick（）函数，该函数将链接到图像的值添加到通用值。 EG：universalInt += imageInt;

我想要做的是，当点击图像时，使用某种变量显示图像被选中，再次点击图像时，它将被取消选择。我想这样，所以onclick（）函数可以像这样工作：

    if(selected){ 
    universalInt += imageInt;
    //append item to array
} 
    else if (!selected){ 
    universalInt -= imageInt; 
    //remove item from array
}

我一直在四处寻找，但我找不到任何东西，是否有一种简单的方法可以在HTML图像中添加“已选择”的变量？我宁愿不使用附加组件。

Answer 1

我建议采用以下方法：

function select(opts) {

  // caching the clicked element for later (repeated) use:    
  var clicked = this,

  // setting the default settings:
    defaults = {
      'element': 'img',
      'selectedAttribute': 'data-selected',
      'markParent': true,
      'parentAttribute': 'data-childSelected',
      'parentMarker': '✓'
    };

  // finding the currently-selected elements (if any) and, if
  // any are found, converting that NodeList to an Array,
  // otherwise using an empty array:    
  var selected = Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0).length ? Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0) : [];

  // discovering whether the clicked element is already
  // in the array (if it's already selected):
  isSelected = selected.indexOf(clicked) > -1;

  // if it's in the array already, we want to de-select:
  if (isSelected) {

    // we de-select by removing the relevant attribute:
    clicked.removeAttribute(defaults.selectedAttribute);

    // if the settings indicate that the parent is also
    // marked:
    if (defaults.markParent === true) {

      // we remove the parent's 'marking' attribute also:
      clicked.parentNode.removeAttribute(defaults.parentAttribute);
    }
  } else {

    // otherwise we set the 'marking' attribute on the 
    // clicked element (to true), and:
    clicked.setAttribute(defaults.selectedAttribute, true);

    // if we're to mark the parent also:
    if (defaults.markParent === true) {

      // we set the parent-marking attribute to the string
      // held in the given variable, for use in the CSS (later):
      clicked.parentNode.setAttribute(defaults.parentAttribute, defaults.parentMarker);
    }
  }

  // here we return the (new) NodeList of selected elements:
  return document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']');
}

// converting the NodeList of <img> elements to an array:    
var images = Array.prototype.slice.call(document.querySelectorAll('img'), 0);

// iterating over that array with Array.prototype.forEach(),
// the first argument to forEach() (here: 'img') is the
// current array-element of the array over we're iterating:
images.forEach(function(img) {

  // binding the select() function to handle the 'click' event
  // on the given element-node:
  img.addEventListener('click', select);
});

function select(opts) {

  var clicked = this,
    defaults = {
      'element': 'img',
      'selectedAttribute': 'data-selected',
      'markParent': true,
      'parentAttribute': 'data-childSelected',
      'parentMarker': '✓'
    };

  var selected = Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0).length ? Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0) : [];
  isSelected = selected.indexOf(clicked) > -1;

  if (isSelected) {
    clicked.removeAttribute(defaults.selectedAttribute);
    if (defaults.markParent === true) {
      clicked.parentNode.removeAttribute(defaults.parentAttribute);
    }
  } else {
    clicked.setAttribute(defaults.selectedAttribute, true);
    if (defaults.markParent === true) {
      clicked.parentNode.setAttribute(defaults.parentAttribute, defaults.parentMarker);
    }
  }

  return document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']');
}

var images = Array.prototype.slice.call(document.querySelectorAll('img'), 0);

images.forEach(function(img) {
  img.addEventListener('click', select);
});

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  height: 100px;
  width: 100px;
  display: inline-block;
  position: relative;
}
li[data-childSelected]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 5px solid rgba(255, 190, 0, 0.5);
  pointer-events: none;
}
li[data-childSelected]::after {
  content: attr(data-childSelected);
  position: absolute;
  top: 5px;
  right: 5px;
  width: 2em;
  height: 2em;
  background-color: rgba(255, 190, 0, 0.5);
  border-radius: 0 0 0 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 4px #000;
  line-height: 2em;
}
#selected::before {
  content: 'Selected images: '
}
#selected:empty::before {
  content: '';
}

<div id="selected"></div>
<ul>
  <li>
    <img src="http://lorempixel.com/100/100/people/1" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/2" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/3" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/4" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/5" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/6" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/7" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/8" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/9" />
  </li>
</ul>

外部JS Fiddle demo，用于实验。

或者，要使用返回的NodeList，我们可以通过以下方式调用完全相同的函数（为简洁起见，此处省略了未更改的函数，但它位于Snippet和外部小提琴中）：

images.forEach(function(img) {
  img.addEventListener('click', function() {

    // setting the textContent of the selected Node
    // to the length of the returned NodeList:
    document.getElementById('selected').textContent = select.apply(img).length;
    // above we use Function.prototype.apply() to
    // explicitly set the select() function's 'this'
  });
});

function select(opts) {

  var clicked = this,
    defaults = {
      'element': 'img',
      'selectedAttribute': 'data-selected',
      'markParent': true,
      'parentAttribute': 'data-childSelected',
      'parentMarker': '✓'
    };

  var selected = Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0).length ? Array.prototype.slice.call(document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']'), 0) : [];
  isSelected = selected.indexOf(clicked) > -1;

  if (isSelected) {
    clicked.removeAttribute(defaults.selectedAttribute);
    if (defaults.markParent === true) {
      clicked.parentNode.removeAttribute(defaults.parentAttribute);
    }
  } else {
    clicked.setAttribute(defaults.selectedAttribute, true);
    if (defaults.markParent === true) {
      clicked.parentNode.setAttribute(defaults.parentAttribute, defaults.parentMarker);
    }
  }

  return document.querySelectorAll(defaults.element + '[' + defaults.selectedAttribute + ']');
}

var images = Array.prototype.slice.call(document.querySelectorAll('img'), 0);

images.forEach(function(img) {
  img.addEventListener('click', function(e) {
    document.getElementById('selected').textContent = select.apply(img).length;
  });
});

ul,
li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  height: 100px;
  width: 100px;
  display: inline-block;
  position: relative;
}
li[data-childSelected]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 5px solid rgba(255, 190, 0, 0.5);
  pointer-events: none;
}
li[data-childSelected]::after {
  content: attr(data-childSelected);
  position: absolute;
  top: 5px;
  right: 5px;
  width: 2em;
  height: 2em;
  background-color: rgba(255, 190, 0, 0.5);
  border-radius: 0 0 0 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 4px #000;
  line-height: 2em;
}
#selected::before {
  content: 'Selected images: '
}
#selected:empty::before {
  content: '';
}

<div id="selected"></div>
<ul>
  <li>
    <img src="http://lorempixel.com/100/100/people/1" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/2" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/3" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/4" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/5" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/6" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/7" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/8" />
  </li>
  <li>
    <img src="http://lorempixel.com/100/100/people/9" />
  </li>
</ul>

外部JS Fiddle demo，用于实验。

参考文献：

CSS：
- CSS“Generated content, automatic numbering and lists。”
- CSS pseudo-elements。
- :empty。
- pointer-events。
JavaScript的：
- Array.prototype.forEach()。
- Array.prototype.slice()。
- Conditional/ternary operator。
- document.getElementById()。
- document.querySelectorAll()。
- Element.getAttribute()。
- Element.setAttribute()。
- Function.prototype.apply()。
- Function.prototype.call()。
- `Node.textContent。

Answer 2

在你的onclick回调中你可以做这样的事情

function onCLickCallback() {
    if(selected){
      selected = false;
    }
    else {
      selected = true;
    }

    if(selected){ 
        universalInt += imageInt;
        //append item to array
    } 
        else if (!selected){ 
        universalInt -= imageInt; 
        //remove item from array
    }
}

选择HTML格式的图像

2 个答案: