1

我有这些 div：

<div id="content_area">
    <div id="banner">
        <div id="b1" class="bannerdiv1">b1</div>
        <div id="b2" class="bannerdiv2">b2</div>
    </div>
  <div id="left_col">
        <div id="lc1" class="kolumndiv1">lc1</div>
        <div id="lc2" class="kolumndiv1">lc2</div>
        <div id="lc3" class="kolumndiv1">lc3</div>
        <div id="lc4" class="kolumndiv1">lc4</div>
    </div>
        <div id="right_col">
        <div id="rc1" class="kolumndiv1">rc1</div>
        <div id="rc2" class="kolumndiv1">rc2</div>
        <div id="rc3" class="kolumndiv1">rc3</div>
        <div id="rc4" class="kolumndiv1">rc4</div>
  </div>

这是他们的 css 以防您需要它们：

.kolumndiv1 
{border:1px solid #333;height:50px;width:245px;background-color:;#c4f2ef}
.bannerdiv1 
{float:left;border:1px solid #333;height:50px;width:245px;
background-color:#c4f2ef;}
.bannerdiv2 
{float:right;border:1px solid #333;height:50px;width:245px;
background-color:#c4f2ef;}
#b1  {  }
#b2  {  }
#lc1 {  }
#lc2 {  }
#lc3 {  }
#lc4 {  }
#rc1 {  }
#rc2 {  }
#rc3 {  }
#rc4 {  }

而这种形式：

<form>
    <input id="search1" name="search1" type="text" value="">
    <button id="search">SÖK</button>
</form>

SÖK = 瑞典语搜索

我想在搜索它们时保存突出显示其中一个，然后在输入 div 时删除突出显示。我认为可行的是获得 .val(); 文本输入并通过 switch 语句在您 .click() 时执行此操作；按钮 addclass(); 将被使用，然后是 css(); 所以我可以向 div 添加新的背景颜色。然后当你 mouseenter(); 它，我将删除（）；新班级。

我删除了所有 div 的所有案例的旧代码，但这里是 #b1 和 #b2 的代码

    $(document).ready(function() {
var searchfunction = $('input[type=text]').val();
switch (searchfunction) {
    case "b1":
        $('#search').click(function() {
            $('#b1').addClass('banner1');
            $('.banner1').css('background-color', '#CF9');
        });
        $('#b1').mouseenter(function() {
            $('.banner1').remove(); 
        });
    break;
    case "b2":
        $('#search').click(function() {
            $('#b2').addClass('banner2');
            $('.banner1').css('background-color', '#CF9');
        });
        $('#b2').mouseenter(function() {
            $('.banner2').remove(); 
        });
    break;
    default:

    break;      
};  
});

我认为问题在于新类不会与 id 重叠。

谢谢，//亚当

4

1 回答 1

0

编辑：我的第一次尝试充满了错误，请看这个 JSFiddle 看看我做了什么：http: //jsfiddle.net/BJJ9D/15/

我建议你把它放在你的 CSS 上：

.banner1 {background-color:#CF9 !important;}

然后你可以在你的 JS 中这样做：

$(document).ready(function() {
    $('#search').on('click', function(e) {
        highlight();
    });
});

function highlight() {
    $('#' + $('#search1').val()).addClass('banner1');
    $('#' + $('#search1').val()).mouseenter(function() {
        $('.banner1').removeClass('banner1'); 
    });
}

使用一个函数可以让你轻松地做这样的事情：

$(document).ready(function() {
    $('#search').on('click', function(e) {
        highlight();
    });

    $('#search1').on('input', function() {
        highlight();
    });
});

function highlight() {
    $('#' + $('#search1').val()).addClass('banner1');
    $('#' + $('#search1').val()).mouseenter(function() {
        $('.banner1').removeClass('banner1'); 
    });
}
于 2013-10-08T16:41:09.973 回答