javascript - 为多个组件使用独特的 javaScript 和 CSS

Question

我有一个样式选择下拉菜单，我创建了它自己的 .css 和 .js。这是当我在一个页面中仅使用一个下拉菜单时发生的情况，它按预期工作正常:

jsFiddle OK

相反，当我使用两个下拉菜单时，它一团糟，这是正常的，因为我的 .js 文件将对页面上存在的所有下拉菜单执行它的功能。这是当我使用具有相同 .js 和 .css 文件的两个下拉菜单时出现的样子:

jsFiddle NOT OK

现在我的问题是如何将相同的 .js 和 .css 文件用于多个下拉列表，而所有这些都按预期运行？

 
 $(function () {
     $('.styled-select select').hide();
     
     $("select#elem").val('2'); 
     $('.styled-select div').html($('.styled-select select option:selected').text());
     
     $('.styled-select div').click(function () {
         $('.styled-select select').show();
         $('.styled-select select').attr('size', 5);
         $('.styled-select select').focus();
     });

     $('.styled-select select').click(function () {
         $('.styled-select div').html($('.styled-select select option:selected').text());
         $('.styled-select select').hide();
     });
     $('.styled-select select').focusout(function () {
         $('.styled-select select').hide();
     });

 });

    .styled-select select {
        position: absolute;
        background: transparent;
        width: 420px;
        padding-top: 5px;
        font-size: 18px;
        font-family: 'PT Sans', sans-serif;
        color: black;
        border: 0;
        border-radius: 4;
        -webkit-appearance: none;
        -moz-appearance: none;
        -o-appearance: none;
        z-index: 1;
        outline: none;
        left: -7px;
    }
    .styled-select {
        background: url('../img/campaignSelector.png') no-repeat right;
        background-color: white;
        width: 420px;
        height: 42px;
        position: relative;
        margin: 0 auto;
        box-shadow: 0 2px 2px 0 #C2C2C2;
        background-position: 97% 50%;
    }
    .styled-select option {
        font-size: 18px;
        background-color: white;
        margin-left: 3px;
    }
    ::-webkit-scrollbar { 
        display: none; 
    }

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div style="width:800px; height: 600px; background: grey;">
        <div class="styled-select" style="left:-250px; top:90px; width:200px;">
            <div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
            <select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
                <option value="0">Marco P</option>
                <option value="1">Marco F</option>
                <option value="2">Daniele</option>
                <option value="3">Cristina</option>
                <option value="4">Angine</option>
            </select>
        </div>
        <div class="styled-select" style=" width:200px; left:50px; top:48px;">
            <div style="font-size:18px; height:42px; position:relative; top:10px; left: 4px;"></div>
            <select id="" name="" style="margin:0 0 0 5px; border: none;" onblur="this.size=0; width:200px;" onchange="this.size=0;">
                <option value="0">ReshaD</option>
                <option value="1">Rasheed</option>
                <option value="2">Reza</option>
                <option value="3">Davin</option>
                <option value="4">Ariya</option>
            </select>
        </div> 

    </div>

Answer 1

为了使您的代码适用于 .styled-select 容器的多个实例，您需要使用 $(this) 来引用引发事件的元素，并且然后使用 closest() 获取最近的父 .style-select。您可以从那里使用 find() 获取所需的元素。试试这个:

$('.styled-select select').hide();
$("select#elem").val('2');

$('.styled-select div').each(function() {
    var $container = $(this).closest('.styled-select');
    $(this).html($container.find('select option:selected').text());
});

$('.styled-select div').click(function() {
    var $container = $(this).closest('.styled-select');
    $container.find('select').show().attr('size', 5).focus();
});

$('.styled-select select').click(function() {
    var $container = $(this).closest('.styled-select');
    var text = $container.find('select option:selected').text();
    $container.find('div').html(text);
    $container.find('select').hide();
});

$('.styled-select select').focusout(function() {
    var $container = $(this).closest('.styled-select');
    $container.find('select').hide();
});

Updated fiddle