商城购物车中没有与反选功能的修改方法及案例分析

[复制链接]
查看816 | 回复0 | 2022-12-26 18:57:29 | 显示全部楼层 |阅读模式
问题及效果:

想实现商城购物车中全选与反选功能,发现jq中并没有提供相应功能;

类似这种jq中没有的功能,我们都可以通过插件的形式自己实现,并在jq中使用;

为元素扩展新方法

知识点:

基本语法:

$.fn.extend(ob)或者 $、jQuery.fn.extend(ob)

ob: JS对象,例:

<p><pre class="prettyprint">    <code class="language-js hljs ">$.fn.extend({
    ex1.function(){},
    ex2.function(){},
});
</code></pre></p>
案例代码:

<p><pre class="prettyprint">    <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"box"</span>></span>JQ插件<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
    $.fn.extend({
        ex1:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(color)</span>{</span>
            <span class="hljs-keyword">this</span>.css(<span class="hljs-string">&#39;background&#39;</span>,color);
        }
    });
    <span class="hljs-comment">//使用</span>
    $(<span class="hljs-string">&#39;#box&#39;</span>).ex1(<span class="hljs-string">&#39;yellow&#39;</span>);
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
扩展jq对象本身

知识点:

jQuery.extend(ob) 或者 $.extend(ob)

ob: JS对象,

例:

<p><pre class="prettyprint">    <code class="language-html hljs ">$.extend({
    ex1.function(){},
    ex2.function(){},
});
</code></pre></p>
案例代码:

<p><pre class="prettyprint">    <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
    $.extend({
        min: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> {</span> <span class="hljs-keyword">return</span> a < b ? a : b; },
        max: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(a, b)</span> {</span> <span class="hljs-keyword">return</span> a > b ? a : b; }
    });
    <span class="hljs-comment">//使用</span>
    alert($.min(<span class="hljs-number">1</span>,<span class="hljs-number">3</span>));
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
综合案例

<p><pre class="prettyprint">    <code class="language-html hljs ">    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"all"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"全不选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"unall"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"反选"</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"un"</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">hr</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> HTML  <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Javascript <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> PHP <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Python <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> Java <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"checkbox"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">""</span>></span> C/C++ <span class="hljs-tag"><<span class="hljs-title">br</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
        $.fn.extend({
            all:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-keyword">this</span>.attr(<span class="hljs-string">&#39;checked&#39;</span>,<span class="hljs-literal">true</span>);
            },
            unall:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-keyword">this</span>.attr(<span class="hljs-string">&#39;checked&#39;</span>,<span class="hljs-literal">false</span>);
            },
            un:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
                <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i<<span class="hljs-keyword">this</span>.length;i++){
                    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>[i].checked == <span class="hljs-literal">true</span>){
                        <span class="hljs-keyword">this</span>[i].checked = <span class="hljs-literal">false</span>;
                    }<span class="hljs-keyword">else</span>{
                        <span class="hljs-keyword">this</span>[i].checked = <span class="hljs-literal">true</span>;
                    }
                }
            }
        });
        <span class="hljs-comment">//使用</span>
        $(<span class="hljs-string">&#39;#all&#39;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            $(<span class="hljs-string">&#39;:checkbox&#39;</span>).all();
        });
        $(<span class="hljs-string">&#39;#unall&#39;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            $(<span class="hljs-string">&#39;:checkbox&#39;</span>).unall();
        });
        $(<span class="hljs-string">&#39;#un&#39;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            $(<span class="hljs-string">&#39;:checkbox&#39;</span>).un();
        });
    </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
each 方法

问题及效果:

在上一节插件中有个反选的功能,本质上就是对选中的每个对象进行遍历操作;

jq原生有没有类似的功能呢?

知识点:

each(callback)

以每一个匹配的元素作为上下文来执行一个函数。

案例代码:

拿到上节课代码进行修改

<p><pre class="prettyprint">    <code class="language-html hljs "><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">
    $(<span class="hljs-string">&#39;#un&#39;</span>).click(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
        $(<span class="hljs-string">&#39;:checkbox&#39;</span>).each(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span>
            <span class="hljs-comment">//判断并取反</span>
            <span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.checked == <span class="hljs-literal">true</span>){
                <span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">false</span>;
            }<span class="hljs-keyword">else</span>{
                <span class="hljs-keyword">this</span>.checked = <span class="hljs-literal">true</span>;
            }
            <span class="hljs-comment">//直接将值取反</span>
            <span class="hljs-comment">// this.checked = !this.checked;</span>
        });
    });
</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre></p>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则