Question

我有下一个用户控件：

<div class="page" >
     <div class="box cf">
    <div class="left">
       <span class="demowrap">
                <asp:Image ID="imgIdCard" class="imgClass" runat ="server" />
            </span>            
            <input type="button" value="Resize"  onclick="Zoom()" />
    </div>
      </div>
    <div id="dialogImage">
        <img id="imageDialog"/>
    </div>          
</div>

当我点击按钮值=“调整大小”时，我想将ImageUrl值从ID =“imgIdCard”传递给src值img id =“imageDialog”。

我在下面的代码中做了下面的代码，但它不起作用：

function Zoom(){
    var img = $(this).parent().select(".imgClass");
    $("#imageDialog").attr('src', img.attr('src'));
}

Answer 1

this功能无法使用关键字zoom。使用此传递当前对象，也使用find而不是select。您可以使用最近而不是父级来查找图像对象的共同祖先，并单击左侧class的按钮。

HTML 的

<input type="button" value="Resize"  onclick="Zoom(this)" />

的Javascript

function Zoom(imgObj){
    var img = $(imgObj).closest('.left').find(".imgClass");
    $("#imageDialog").attr('src', img.attr('src'));
}

您可以使用bind为您的图片按钮和jQuery事件分配一些ID，然后这将在处理程序中提供。

HTML 的

<input id="mybutton" type="button" value="Resize" />

的Javascript

$('#mybutton').click(function (){
    var img = $(this).closest('.left').find(".imgClass");
    $("#imageDialog").attr('src', img.attr('src'));
});

Answer 2

你非常接近。将select替换为find

var img = elem.parent().find(".imgClass");

$(this).parent()会为您提供课程demowrap＆amp; .find('class')将为您提供具有指定类的孩子。

哦，是的，也将元素传递给函数Zoom，如onclick="Zoom(this)" 并使用函数Zoom（elem）{}

function Zoom(elem){
    var img = elem.parent().find(".imgClass");
    $("#imageDialog").attr('src', img.attr('src'));
}

将ImageUrl值从Image控件分配给图像html控件

2 个答案: