javascript - 使用jQuery同位素时如何自动添加内联样式？如何删除？

我已经搜索过了。我找到了一些链接..但是没有一个对我有帮助。

http://stackoverflow.com/questions/13974594/jquery-isotope-plugin-adding-inline-displaynone-cant-figure-out-why
http://stackoverflow.com/questions/10404933/jquery-isotope-library-with-html-tables

<div class="menu filter_open">
                       <span class="filter_by">
                        <em>Filter Awards By :</em>
                       </span>
                       <span data-filter="country_filter" class="drop-down">
                            Country
                       </span>
                       <span data-filter="continent_filter" class="drop-down">
                            Continent
                       </span>
                       <span data-filter="test_filter" class="drop-down">
                            Test
                       </span>
                       <span data-filter="odi_filter" class="drop-down">
                            ODI
                       </span>
                       <span data-filter="t20_filter" class="drop-down">
                            T20
                       </span>
                      </div>
<div class="filter_open filter_open2">
                    <div id="country_filter" class="filters">
                        <p>ghfgh</p>
                    </div>
                    <div id="continent_filter" class="filters">
                            <p>zxzcxzc</p>
                    </div>
                    <div id="test_filter" class="filters">
                            <p>zxczxcz</p>
                    </div>
                    <div id="odi_filter" class="filters">
                        <p>zxczxcxz</p>
                    </div>
                    <div id="t20_filter" class="filters">
                    </div>
                </div>

我的JavaScript代码：

 $(document).ready(function(){
 var container = $('.filter_open');
 $('.filter_open span.drop-down').click(function(){

    var selector ='#'+ $(this).attr('data-filter');
    container.isotope({
        filter: selector
     });
     return false;
 });
 });

必要的CSS是：

.filter_open2
{

    width:100%;
    height:4%;
    border:1px solid;
}
.filters
{
display:none;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
 pointer-events: none;
 z-index: 1;
 }

当我单击country时，它应该只显示与country_filter匹配的div元素。但是当我单击特定的过滤器时，所有内容都将消失。当我尝试使用firebug调试它时，我发现内联样式是自动添加的。为什么会自动添加呢？如何解决这个问题呢？你能帮我么？！
This is the image before i click on a filter！
This is the picture after i click on country and the below part shows the inline styles that are added automatically

最佳答案

jQuery同位素完成向其添加内联样式后，对该元素使用setAttribute("style","");。

具有任何ID的元素的示例：

document.getElementById('#Id').setAttribute("style",""); // For any element Id

See this fiddle。它仅影响内联样式。



更新：

尝试以下代码：

 $(document).ready(function(){
 var container = $('.filter_open');
 $('.filter_open span.drop-down').click(function(){

    var selector ='#'+ $(this).attr('data-filter');
    container.isotope({
        filter: selector
    });

     var ele = document.getElementsByClassName("drop-down");

     for(i=0;i<ele.length;i++)
     {
     ele[i].setAttribute("style","");
     }
     return false;
  });
  });

Demo Fiddle

关于javascript - 使用jQuery同位素时如何自动添加内联样式？如何删除？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21620090/