при двойном щелчке одного элемента выбирается другой

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-индекса ..?

Answer 1

Это работает в вашей скрипке JS.

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

С наилучшими пожеланиями Jonas

Answer 2

Я нашел ответ, и это было мучительно легко ..> _>

Мне просто нужно было обернуть кнопки в другом div, чтобы они стали более отчаянными от остальной части HTML.

Вроде так:

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

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