javascript - 如何将图像添加到标签来自
问题描述
解决方案
你应该试试这个
//test for getting url value from attr
// var img1 = $('.test').attr("data-thumbnail");
// console.log(img1);
//test for iterating over child elements
var langArray = [];
$('.vodiapicker option').each(function(){
var img = $(this).attr("data-thumbnail");
var text = this.innerText;
var value = $(this).val();
var item = '<li><img src="'+ img +'" alt="" value="'+value+'"/><span>'+ text +'</span></li>';
langArray.push(item);
})
$('#a').html(langArray);
//Set the button value to the first el of the array
$('.btn-select').html(langArray[0]);
$('.btn-select').attr('value', 'en');
//change button stuff on click
$('#a li').click(function(){
var img = $(this).find('img').attr("src");
var value = $(this).find('img').attr('value');
var text = this.innerText;
var item = '<li><img src="'+ img +'" alt="" /><span>'+ text +'</span></li>';
$('.btn-select').html(item);
$('.btn-select').attr('value', value);
$(".b").toggle();
//console.log(value);
});
$(".btn-select").click(function(){
$(".b").toggle();
});
//check local storage for the lang
var langIndex = langArray.indexOf('ch');
$('.btn-select').html(langArray[langIndex]);
//$('.btn-select').attr('value', 'en');
.vodiapicker{
display: none;
}
#a{
padding-left: 0px;
}
#a img, .btn-select img{
width: 12px;
}
#a li{
list-style: none;
padding-top: 5px;
padding-bottom: 5px;
}
#a li:hover{
background-color: #F4F3F3;
}
#a li img{
margin: 5px;
}
#a li span, .btn-select li span{
margin-left: 30px;
}
/* item list */
.b{
display: none;
width: 100%;
max-width: 350px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
border: 1px solid rgba(0,0,0,.15);
border-radius: 5px;
}
.open{
display: show !important;
}
.btn-select{
margin-top: 10px;
width: 100%;
max-width: 350px;
height: 34px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.btn-select li{
list-style: none;
float: left;
padding-bottom: 0px;
}
.btn-select:hover li{
margin-left: 0px;
}
.btn-select:hover{
background-color: #F4F3F3;
border: 1px solid transparent;
box-shadow: inset 0 0px 0px 1px #ccc;
}
.btn-select:focus{
outline:none;
}
.lang-select{
margin-left: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="vodiapicker">
<option value="en" class="test" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/LetterA.svg/2000px-LetterA.svg.png">English</option>
<option value="au" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/NYCS-bull-trans-B.svg/480px-NYCS-bull-trans-B.svg.png">Engllish (AU)</option>
<option value="uk" data-thumbnail="https://glot.io/static/img/c.svg?etag=ZaoLBh_p">Chinese (Simplified)</option>
<option value="cn" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYCS-bull-trans-D.svg/2000px-NYCS-bull-trans-D.svg.png">German</option>
<option value="de" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/MO-supp-E.svg/600px-MO-supp-E.svg.png">Danish</option>
<option value="dk" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/267px-F_icon.svg.png">French</option>
<option value="fr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png">Greek</option>
<option value="gr" data-thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/4H_Emblem.svg/1000px-4H_Emblem.svg.png">Italian</option>
</select>
<div class="lang-select">
<button class="btn-select" value=""></button>
<div class="b">
<ul id="a"></ul>
</div>
</div>
推荐阅读
- javascript - 在自定义 Cypress 命令中为每个循环中断
- spring-boot - 我们可以将休眠与弹簧网通量一起使用吗
- php - 将变量值设置为行数据php
- powershell - 如何使用powershell将变量添加到csv文件?
- java - KOTLIN / JAVA:字符串不会在循环中被替换
- webbrowser-control - 在任务管理器中,为什么 Cefsharp 创建的浏览器实例不显示嵌入式浏览器 webview,如 webview2 所示?
- php - 不推荐使用:非静态方法 AriKernel::init() 不应在
- visual-c++ - uwp 中的 bluetoothapis.h 标头是否兼容
- api - 如何使用 Javascript Graph API 将帖子安排到 Instagram?
- r - 如何在 R 中为具有相同变量的多个数据框创建一个带有 summary_table (qwraps2) 的表?