使用Javascript

Question

我的页面显示3个不同的图标和每行的用户名。用户（例如，用户名1）可以单击图标并在两个图像之间切换。这是CodePen上的代码。 https://codepen.io/centem/pen/NgKEmG 我知道我可以使用简单的SharePoint列表并简化操作，但我也试图以不依赖于SharePoint的方式学习如何执行此操作。谢谢。

我设置它的方式是使用SharePoint网页查看器。如何将该图标切换设置保存到文件，以便查看该页面的任何人都可以看到用户将图标保留在哪个设置上。

如果用户名1没有安装，则他/她点击将图像切换为x。然后，查看该页面的其他人可以看到该设置。

我在考虑使用JSON文件。这是一个很好的方法吗？

$('ul.list-unstyled li img').on('click', function() {
  var clicked = $(this).data('clicked');
  if (clicked === '1') {
    $(this).attr('src', $(this).data('src'))
    $(this).data('clicked', '0')
  } else {
    $(this).data('src', $(this).attr('src'))
    $(this).attr('src', "https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png");
    $(this).data('clicked', '1')
  }
})

img {
  height: 25px;
  padding-right: 4px;
}

li {
  margin: 4px;
  clear: both;
}

li:nth-child(odd) {
  background: #f0f0f5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- 
    When image clicked change image to:
    https://www.centerpointe.com/v2/wp-content/uploads/2014/01/red-x.png
    -->

<ul class="list-unstyled">

  <li>Username 1<span class="pull-right">
    <img class="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
    <img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
    <img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>

  <li>Username 2<span class="pull-right">
    <img class="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
    <img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
    <img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>
  </li>

  <li>Username 3<span class="pull-right">
    <img class="chrome" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png"></span><span class="pull-right">
    <img src="http://pngimg.com/uploads/firefox/firefox_PNG16.png"></span><span class="pull-right">
    <img src="https://ma.ttias.be/wp-content/uploads/2015/07/internet-explorer-logo.png"></span></li>
  </li>

</ul>