Question

通过点击我选择一个子对象，一个有两个类的div。现在我喜欢在div中使用特定的类。这是我到目前为止所做的。

HTML

<div class="col-md-7">
    <img class="img-modal img-responsive cursor-pointer" data-toggle="modal" data-target="#modal-45" src="http://placehold.it/350x150" alt="Image">
</div>

<!--  Modal -->
<div class="modal fade" id="modal-45" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content cursor-pointer" data-toggle="modal" data-target="#modal-45">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="#modal-45">&times;</button>
                <h1 class="modal-title">Modal Title</h1>
            </div>

            <div class="modal-body">
                <div class="img-center">
                    <img class="img-modal img-responsive" src="http://placehold.it/350x150" alt="Image">
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
<!--  Modal end -->

的jQuery

$(document).ready(function() {    

    $('.img-modal').on('click', function () {

        var modalAltClicked = $(this).attr('alt');
        console.log ('modalAltClicked = '+ modalAltClicked);

        var modalIdClicked = $(this).attr('data-target');
        console.log( 'modalIdClicked = ' + $(this).attr('data-target') );

        var modalChilrdenDialog = $(modalIdClicked).children('.modal-dialog');
        // this is the whole div with BOTH classes
        console.log (modalChilrdenDialog);

        var modalChilrdenDialogClass = $(modalChilrdenDialog).attr('class');
        console.log (modalChilrdenDialogClass);

        // now I want to work with the
        // modalChilrdenDialog's ".modal-dialog" class
        // how do I select it?

    });
});

如果查看日志，则可以看到var modalChilrdenDialog返回一个对象。从这个对象开始，我可以获得两个带有var modalChilrdenDialogClass的类，尽管我有兴趣存储在一个变量中以便跟随的操作是一个具有特定名称的类，.modal-dialog。

可以使用此https://stackoverflow.com/a/20611550/1010918吗？

$('.s').click(function()
{ 
  var firstClass = $(this).attr('class').split(" ")[0];
});

虽然我怎么能告诉它只使用特定的类名，.modal-dialog而不是另一个，以防该类不是类序列中的第一个？

我已经检查了.closest，但是它在dom上移动，基本上一旦点击我就喜欢使用特定的子对象类。我不是在寻找带有特定类或类的第一个div。 How can I select an element with multiple classes?

我在点击时查找子对象，然后只想使用该对象的一个特定类。相当新的，不确定这是否足够有意义？谢谢你的帮助。

编辑：有了这个位，我能够靠近，但是如何从返回dom中所有选定元素的对象中获取被点击的元素？

var y = $(modalIdClicked).children('.modal-dialog').attr('class').split(" ")[0];
console.log (y);

// this is an array of all the .modal-dialog classes in the dom!!
// how do I get the one that has been clicked on? by data-target ttribute?
var z = $('.' + y);
console.log (z);

edit2：为了清理我已经明白了我真正需要的东西。从上面给出的html我需要两件事。已单击的模态标识以及单击时打开的相应模式对话框类，属于已单击的模式标识。

对于第一部分，我抛弃了一切并从头开始。有了这个，我就可以获得img-modal的data-target属性了。

$('.img-modal').click(function(event) {

    var target = $(event.target).data(target);
    console.log (target);

    var x = $(target);

    console.log ( x );

    // next step get children with class modal-dialog of $target

});

target返回日志Object {target: "#modal-45", toggle: "modal"}

的对象

在这里，我没有得到任何进一步。

var x = $(target);
console.log ( x );

var y = $(target).attr('data-target');
console.log (y);

x给了我一个对象。

    [Object, jquery: "1.11.2", constructor: function, selector: "", toArray: function, get: function…]
0: Object
target: "#modal-45"
toggle: "modal"
__proto__: Object
length: 1
__proto__: m[0]

y在日志中显示为undefined。

那么如何从我从点击中获得的对象中获取带有类模态对话框的div？

如何使用其类（例如.modal-dialog）或其数据属性（例如.modal-content，具有数据属性data-target）来处理各种模态div通过点击获得的模态ID？

基本上我需要能够处理任何属于img-modal的模态类，这些类已被点击以打开所述模态。

这里有什么正确的方法，在整个网站上有多个模态？

Answer 1

＆＃13;

$('.img-modal').click(function(event) {
  var target = $(this).data('target'); // output the string of '#modal-45';
  var destination = $(target).children('.modal-dialog'); 
  destination.toggle('slow');  
});

＆＃13;

.modal-dialog {
display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>click img corrisponding img will appear</p>
<div class="col-md-7">
    <img class="img-modal img-responsive cursor-pointer" data-toggle="modal" data-target="#modal-45" src="http://placehold.it/350x150" alt="Image">
</div>

<!--  Modal -->
<div class="modal fade" id="modal-45" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content cursor-pointer" data-toggle="modal" data-target="#modal-45">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="#modal-45">&times;</button>
                <h1 class="modal-title">Modal Title</h1>
            </div>

            <div class="modal-body">
                <div class="img-center">
                    <img class="img-modal img-responsive" src="http://placehold.it/350x150" alt="Image">
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
<!--  Modal end -->

＆＃13;

从具有多个类的元素中按类名选择类

1 个答案: