Question

我在一个相当简单的代码块中遇到了一个问题，就像我看来的那样。我将一个属性从Spring MVC Model传递给jsp视图：

<script type="text/javascript">
    var pic= '<c:out value="${pictures.pic}"/>';
    $(document).ready(function() {
    $("a[rel=shareit"+pic+"], #shareit-box").click(function() {     
        <!--bunch of code here-->
    });
</script>

问题是a[rel=shareit"+pic+"]没有得到所需的数据，但仍然与脚本完全相同。我尝试了所有可能的单引号和双引号组合，但没有一个有帮助。顺便说一句，正如我在Firebug中看到的那样，var pic被正确分配给我需要的值。我非常感谢你的帮助。

执行代码的网页的整个片段如下所示：

<!-- Images list -->
        <div style="padding-left:10px; width:60%; float:right;">
            <c:forEach items="${allPictures}" var="pictures">
                    <a href="#" rel="shareit${pictures.pic}"><img class="border" src="resources/uploadedImages/${pictures.pic106} /"></a>   

                    <div id="shareit-box">
                        <div id="shareit-header"></div>
                        <div id="shareit-body">
                            <div id="shareit-blank"></div>
                            <div id="shareit-icon">
                            <ul>
                                <li><a href="image/${pictures.pic106}">image</a></li>
                                <li><a href="#"><spring:message code="label.banImage" /></a></li>
                                <li><a href="image/delete/${pictures.pic}.jpg"><spring:message code="label.deleteImage" /></a></li>
                            </ul>
                            </div>
                        </div>
                    </div>

                    <script type="text/javascript">
                        var pic= '<c:out value="${pictures.pic}"/>';
                        mylink = 'a[rel=shareit'+pic+'], #shareit-box';
                        $(document).ready(function() {
                            $(myLink).click(function() {        
                                var height = $(this).height();
                                var top = $(this).offset().top;
                                var left = $(this).offset().left + ($(this).width() /2) - ($('#shareit-box').width() / 2);      
                                $('#shareit-header').height(height);
                                $('#shareit-box').show();
                                $('#shareit-box').css({'top':top, 'left':left});
                            });
                            $('#shareit-box').mouseleave(function () {
                                $('#shareit-field').val('');
                                $(this).hide();
                            });
                        });
                    </script>

            </c:forEach>
        </div>

UPD：这里发生了某种魔法:) 我做了一些实验：当我手动分配到pic变量时，字符串（例如Img04_03_12_22_16_12_336）一切正常

var pic= 'Img04_03_12_22_16_12_336';
                        var pic1='a[rel="shareit' + pic + '"], #shareit-box';
                        $(document).ready(function() {
                            $(pic1).click(function() {

但是，当我尝试分配从模型属性中提取的图片数据时，它无法正常工作，尽管我在Firebag中看到pic已经被赋予绝对正确的值。为什么会这样？

解：好吧，我终于拿起所有的碎片并让它们起作用了。我发布了最终的变体，仅仅是因为其他人会遇到同样的问题。感谢大家的参与。

<!-- Images list -->
        <div style="padding-left:10px; width:60%; float:right;">
            <c:forEach items="${allPictures}" var="pictures">
                    <a href="#" rel="shareit${pictures.pic}"><img class="border" src="resources/uploadedImages/${pictures.pic106} /"></a>   

                        <div id="${pictures.pic}" style="position:absolute; display:none;">
                            <div id="shareit-header"></div>
                            <div id="shareit-body">
                                <div id="shareit-blank"></div>
                                <div id="shareit-icon">
                                <ul>
                                    <li><a href="image/${pictures.pic106}">image</a></li>
                                    <li><a href="#"><spring:message code="label.banImage" /></a></li>
                                    <li><a href="image/delete/${pictures.pic}.jpg"><spring:message code="label.deleteImage" /></a></li>
                                </ul>
                                </div>
                            </div>
                        </div>

                    <script type="text/javascript">
                        $(document).ready(function() {
                            $('a[rel="shareit<c:out value="${pictures.pic}"/>"], #<c:out value="${pictures.pic}"/>').click(function() {     
                                var height = $(this).height();
                                var top = $(this).offset().top;
                                var left = $(this).offset().left + ($(this).width() /2) - ($('#shareit-box').width() / 2);      
                                $('#shareit-header').height(height);
                                $('#<c:out value="${pictures.pic}"/>').show();
                                $('#<c:out value="${pictures.pic}"/>').css({'top':top, 'left':left});
                            });
                            $('#<c:out value="${pictures.pic}"/>').mouseleave(function () {
                                $('#shareit-field').val('');
                                $(this).hide();
                            });
                        });
                    </script>

            </c:forEach>
        </div>

Answer 1

如果pic包含空格，那么您需要将值包装在引号中与rel进行比较。一般来说，我认为这样做是个好主意，但并不是绝对必要的。试试这个：

$('a[rel="shareit' + pic + '"], #shareit-box').click(function() {
    <!--bunch of code here-->
});

如果这不是问题，那么整个选择器不正确可能会出现问题，如果没有看到运行此代码的HTML，则无法判断。

在[rel = ...]中使用变量，JQuery

1 个答案: