前端开发遇到的问题（html+jQuery）

1.一个页面中的多个复制内容到剪切板

引入clipboard.min.js
可直接从官网下载：http://www.clipboardjs.cn/
当有多个需要复制，需要先判断目标的当前环境
html

<div class="loop-list">
	<p class="copyVal">今天天气真好</p>
	<div class="share">
		 <p class="copy">点击复制</p>
	</div>
</div>
<div class="loop-list">
	<p class="copyVal">我草你家真大</p>
	<div class="share">
		 <p class="copy">点击复制</p>
	</div>
</div>

js

var content = "请复制！";
    $(".share").hover(function(){          //这里我设置了鼠标移入父元素，动态改变content内容
        var parentChild = $(this).parents(".loop-list");  
        content = parentChild.find(".copyVal").text(); //通过该元素的祖先元素，找到不同级的.copyVal（要复制的内容）
    })
    //下面就是官方给的模板
    var clipboard = new ClipboardJS('.copy', {
        text: function () {
            return content;
        }
    });
    clipboard.on('success', function (e) {
        alert("复制成功");
    });
    clipboard.on('error', function (e) {
        console.log(e);
    });

这样点击不同的.copy就会复制其相对应需要复制的内容，我这里用到了jQuery选择器，使用时别忘了引入jquery

2.通过不同链接动态生成多个二维码

引入
jquery.js
jquery.qrcode.min.js

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>

html

<div class="qrcode" data-url=“www.xxx.com”></div>
<div class="qrcode" data-url=“www.bbb.com”></div>
<div class="qrcode" data-url=“www.ccc.com”></div>

js

 $('.qrcode').each(function(){
        var url = $(this).attr('data-url');           //循环数据的时候给每个元素加上不同的data-url
        jQuery(this).qrcode({width:100,height:100,correctLevel:0,render: "canvas",text: url});   
        //render有两个选项，canvas和table，如果你的二维码太小，不要用table
    });

3.页面简单的中英文切换 translater.min.js使用心得

页面的中英文切换，除了最简单的两张页面，和网上的整站翻译，最后发现translater.min.js
用法极为简单，只要在每段文字下面加上中英文的注释，当然这会比较繁琐，不适用分段文字过多的项目。
首先，引入translater.min.js
官网：https://wangchujiang.com/translater.js/

<script src="translater.min.js"></script>

html

<a class="chinese" href="javascript:void(0);">
中文
<!--{cn}中文-->
<!--{en}Chinese-->
</a>
<a class="english" href="javascript:void(0);">
英文<!--{cn}英文-->
<!--{en}English-->
</a>
<p>
	你好
	<!--{cn}你好-->
	<!--{en}Hellow-->
</p>

js

 var t = localStorage.getItem("language")
     //取缓存保存的网站语言，页面刷新或跳转也不影响已切换的语言
    if(t=="cn"){
        var tran;
        tran = new Translater();
        if (tran.getLang() === "default") tran.setLang('cn');
        var tran = new Translater({
            lang: "cn"
        });
    }else{
        var tran;
        tran = new Translater();
        if (tran.getLang() === "default") tran.setLang('en');
        var tran = new Translater({
            lang: "en"
        });
    }
    $(".chinese").click(function () {
        //点击中文，全部显示注释内的中文，并将中文语言进行缓存
        var tran;
        tran = new Translater();
        if (tran.getLang() === "default") tran.setLang('cn');
        var tran = new Translater({
            lang: "cn"
        });
        localStorage.setItem("language", "cn");
    })

    $(".english").click(function () {
            //点击英文，全部显示注释内的英文，并将英文语言进行缓存
        var tran;
        tran = new Translater();
        if (tran.getLang() === "default") tran.setLang('en');
        var tran = new Translater({
            lang: "en"
        });
        localStorage.setItem("language", "en");
    })

多种语言都可以使用，同理不适用于大型页面。我这里用到了jQuery选择器，使用时别忘了引入jquery