Question

我有一个带有图像网格的页面。我想要一个下拉列表出现在任何被点击的图像上。我所拥有的代码允许使用特定的id，而不是任何id。我的代码工作得很好，但它的ID是特定的。

CSS：

.wide { width:50px; }
.high { height:50px; }
table { 
    border-collapse:collapse;
    margin:0px;
    padding:0px;
}
td {
    margin:0px;
    padding:0px;
}
td img {
    display:block;
}
.messagepop {
    background-color:#FFFFFF;
    border:1px solid #999999;
    cursor: pointer;
    display:none;
    margin-top: 5px;
    padding-left:2px;
    position:absolute;
    text-align:left;
    width:50px;
    z-index:50;
    font-family:Tahoma;
}
.messagepop p, .messagepop.div{
    border-bottom: 1px solid #EFEFEF;
    line-height:1.3em;
    display:inline;
}
.close {
    color:blue;
}

HTML：

<td class="wide high">
    <div class="messagepop pop" id="x1y1pop">
        <p>dfkj</p>
        <p>alksdjh</p>
        <p class="close">Cancel</p>
    </div>

    <img alt="test" src="images/gray.jpg" class="wide high" id="x1y1" />
</td>

JQuery的：

function deselect(e) {
    $('#x1y2pop').slideFadeToggle(function () {
        e.removeClass('selected');
    });
}

$(function () {
    $('#x1y2').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $('#x1y2pop').slideFadeToggle();
        }
        return false;
    });

    $('.close').on('click', function () {
        deselect($('#x1y2'));
        return false;
    });
});

$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, 'fast', easing, callback);
};

我需要$('#x1y2pop').slideFadeToggle和$('#x1y2').on以及$('#x1y2pop').slideFadeToggle();和deselect($('#x1y2'));才能接受变量而不是静态ID。喜欢

$(selector).on('click', function(){

其中selector是变量。这可能吗？

Answer 1

如果我理解正确，您可以通过定位类而不是ID来最好地解决此问题。此外，您可以使用jQuery＆＃39; .prev()来定位相关的<div>。

这样的事情：

$(function () {
    $('.canToggle img').on('click', function () {
        if ($(this).hasClass('selected')) {
            deselect($(this));
        } else {
            $(this).addClass('selected');
            $(this).prev(".messagepop.pop").slideFadeToggle();
        }
        return false;
    });

    $('.close').on('click', (function (e) {
        e.preventDefault();
        var pop = $(this).closest(".messagepop.pop");
        pop.slideFadeToggle(function() {
            pop.next("img").removeClass('selected');
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="canToggle">
    <tr>
        <td class="wide high">
            <div class="messagepop pop" id="x1y1pop">
                <p>dfkj</p>
                <p>alksdjh</p>
                <p class="close">Cancel</p>
            </div>

            <img alt="test" src="images/gray.jpg" class="wide high" id="x1y1" />
        </td>
        <td class="wide high">
            <div class="messagepop pop" id="x1y2pop">
                <p>dfkj</p>
                <p>alksdjh</p>
                <p class="close">Cancel</p>
            </div>

            <img alt="test" src="images/gray.jpg" class="wide high" id="x1y2" />
        </td>
    <tr>
</table>

单击变量id下拉菜单

1 个答案: