Question

这是一个基本问题，但是在阅读了其他人的问题，文章和教程之后，当涉及到嵌入式SVG图标以及如何在HTML，CSS和jQuery中正确处理它们时，我还是一头雾水。

我的目标：当我单击 +图标时，它变为-图标。

我的工作：我从Noun项目下载了两个SVG图标。然后，我在HTML标记中添加了 +图标的代码。这是到目前为止的样子。

<div class="border"></div>
                <div class="clickableList">
                    <span class="types">Swap icons</span>
                    <svg width="20px" height="20px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <title>noun_1776266_cc</title>
                        <desc>Created with Sketch.</desc>
                        <defs></defs>
                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g id="noun_1776266_cc_2" transform="translate(0.000000, -1.000000)" fill="#000000" fill-rule="nonzero">
                                <g id="Group" transform="translate(0.000000, 0.637820)">
                                    <polygon id="Shape" points="33 0.36218 33 33.36218 0 33.36218 0 41.3622 33 41.3622 33 74.3622 41 74.3622 41 41.3622 74 41.3622 74 33.36218 41 33.36218 41 0.36218 33 0.36218"></polygon>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>

.types {
  font-size: 20px;
  font-family: arial;
}

$('.clickableList').click(function() {
event.preventDefault();

现在，我必须添加第二个图标，而这部分是我停留了一段时间的内容。以下是第二个图标的标记，但是我无法弄清楚如何以及在HTML中添加它的方式，因此稍后单击第一个图标时，它将更改为第二个图标。

<!-- second SVG-->
<svg width="20px" height="20px" viewBox="0 0 74 74" version="1.1" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>noun_line_1776294</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="noun_line_1776294" transform="translate(-6.000000, -31.000000)">
        <g id="Group" transform="translate(0.000000, 0.637820)">
            <polygon id="Shape" fill="#000000" fill-rule="nonzero" points="6 30.36218 6 38.36218 68 38.36218 68 30.36218"></polygon>
            <rect id="Rectangle" x="0" y="0" width="74" height="69"></rect>
        </g>
    </g>
</g>
</svg>

Answer 1

首先，jQuery只是一个库（一个使您可以轻松地进行新操作的脚本集合）。到目前为止，它是最常用的Javascript库，因此人们经常将其与Javascript本身混淆。您可以使用Javascript编程，然后使用jQuery使修改HTML元素和许多其他内容变得更加容易。

实际上，我建议您使用Font Awesome icons而不是硬编码的SVG，因为它使用起来会容易得多，但是由于您的要求，这是将加号更改为最简单的方法之一减号：

http://jsfiddle.net/461jaLxt/6/

$('.clickableList').click(function(event) {
   event.preventDefault();
   $('#svgPlus').toggle();
   $('#svgMinus').toggle();
});

.types {
   font-size: 20px;
   font-family: arial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="border">
   <div class="clickableList">
      <span class="types">Swap icons</span>
      <svg id="svgPlus" width="20px" height="20px" viewBox="0 0 74 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>noun_1776266_cc</title>
         <desc>Created with Sketch.</desc>
         <defs></defs>
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="noun_1776266_cc_2" transform="translate(0.000000, -1.000000)" fill="#000000" fill-rule="nonzero">
               <g id="Group" transform="translate(0.000000, 0.637820)">
                  <polygon id="Shape" points="33 0.36218 33 33.36218 0 33.36218 0 41.3622 33 41.3622 33 74.3622 41 74.3622 41 41.3622 74 41.3622 74 33.36218 41 33.36218 41 0.36218 33 0.36218"></polygon>
               </g>
            </g>
         </g>
      </svg>
      <svg id="svgMinus" style="display: none;" width="20px" height="20px" viewBox="0 0 74 74" version="1.1" 
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>noun_line_1776294</title>
         <desc>Created with Sketch.</desc>
         <defs></defs>
         <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="noun_line_1776294" transform="translate(-6.000000, -31.000000)">
               <g id="Group" transform="translate(0.000000, 0.637820)">
                  <polygon id="Shape" fill="#000000" fill-rule="nonzero" points="6 30.36218 6 38.36218 68 38.36218 68 30.36218"></polygon>
                  <rect id="Rectangle" x="0" y="0" width="74" height="69"></rect>
               </g>
            </g>
         </g>
      </svg>
   </div>
</div>

它如何工作？

基本上，当您单击它时，所有操作都会隐藏加号并显示减号，如果再次单击，则反之亦然。如果您在上面的示例中查看第二个SVG元素，您会看到它具有style="display: none;"，也就是inline CSS，以使元素隐藏在开头（这就是减号在开始时不可见的原因））。为了交换显示的内容，我们使用jQuery的toggle() function，它会显示元素是否被隐藏，否则将其隐藏。

使用HTML，CSS和jQuery单击时，如何交换简单的SVG图标？

1 个答案:

它如何工作？