javascript - 当双击一个元素时，另一个被选中

Question

我用 html/css/js 编写了一个图像滚动器，一个非常简单的:单击右键，我遍历“holder”-div 中的所有图像，并在具有类名的图像之后更改图像的类="当前"。

但我认为这不是问题所在。每当我连续单击左侧或右侧按钮时，div 中的图像就会被选中(蓝色选择框)。如果我连续点击左键，甚至它上面的文本也会被选中。

<div class="grid_4 omega image_box">
    <div id="txt_choose" class="image_txt">
        this is helpful text
    </div>
    <div id="alt_spacer"></div>
    <div id="image_content" class="image_content" onclick="chooseImageType(this)">
        <div id="current" class="current"><img src="images/default1.png" /></div>
        <div id="current" class="hidden"><img src="images/default2.png" /></div>
    </div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

这是CSS:

.image_btn_right
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 260px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/right.png');
}
.image_btn_left
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 20px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/left.png');
}
.image_content
{
    height          : 280px;
    background-color: white;
    margin          : 10px;
}

应要求，我的 javascript:

function showNext()
{
//vars
var shown = false;
var current;

$('#image_content > div').each(function()
{
    if($(this).attr('class') == "current")
    {
        current = $(this);
        shown   = true;
    }
    else if($(this).attr('class') == "hidden" && shown == true)
    {
        current.hide();
        current.attr('class', 'prev');
        current.attr('id', '');
        $(this).show();
        $(this).attr('class', 'current');
        $(this).attr('id', 'current');
        shown = false;
    }
});
}

有没有办法阻止像这样选择上面的图像和文本(实际上并没有使它们不可选择)？ 会不会是因为按钮的相对位置和它们的 z-index..？

Answer 1

这适用于您的 JS fiddle 。

function showNext()
{

    //vars
    var shown = false;
    var current;
    window.getSelection().removeAllRanges();
   $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "current")
        {
            current = $(this);
            shown   = true;
        }
        else if($(this).attr('class') == "hidden" && shown == true)
        {
            current.hide();
            current.attr('class', 'prev');
            current.attr('id', '');
            $(this).show();
            $(this).attr('class', 'current');
            $(this).attr('id', 'current');
            shown = false;
        }
    });
}

function showPrev()
{
window.getSelection().removeAllRanges();
    //vars
    var prev_present = false;
    var prev;

    $('#image_content > div').each(function()
    {
        if($(this).attr('class') == "prev")
        {
            prev         = $(this);
            prev_present = true;
        }
        else if($(this).attr('class') == "current" && prev_present == true)
        {
            $(this).hide();
            $(this).attr('class', 'hidden');
            $(this).attr('id', '');
            prev.show();
            prev.attr('class', 'current');
            prev.attr('id', 'current');
            prev_present = false;
        }
    });
}

最好的问候 乔纳斯