双击一个元素时，会选中另一个元素

when double-clicking one element, another gets selected

本文关键字：元素 另一个 双击 一个      更新时间：2023-09-26

我用html/css/js写了一个图像滚动器，一个非常简单的滚动器：点击右键，我浏览"holder"-div中的所有图像，并在类名为"current"的图像之后更改图像的类。

但我认为这不是问题所在。每当我连续单击左侧或右侧按钮时，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索引..吗。。？

这在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;
        }
    });
}

致以最良好的问候乔纳斯

我找到了答案，这很容易

我只需要将按钮包装在另一个div中，这样它们就可以从html的其余部分中得到更多的重编。

像这样：

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>
    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>
相关文章：