Question

我正在尝试使用jquery显示图像。我有一个具有ID＆amp;的功能。 PATH作为参数.ID表示该部分（每个部分是一个加载用户操作的html页面），还有一个文本区域，我正在显示文本文件内容。现在我想以同样的方式显示图像，我尝试了不同的方法，但它没有成功.Below是我的Java脚本文件＆amp; HTML文件

HTML文件：

<html>
    <body>
        <div  id="tab1"  name="tab" style="cursor: pointer; cursor: hand; width:90px;float: left;height: 22px ; margin-top: 0px;
        background-color:lightgrey;font-size: 13px;text-align: center;border-bottom: none;display: table-cell;"                 onClick="tabs(1)">
        <div style="margin-top: 3px" >TAB1</div>
        </div>
        <div   id="tab2" name="tab" style="cursor: pointer; cursor: hand; width:90px;background-color:lightgrey;float: left;height: 20px; margin-top: 2px; font-size: 12px;text-align: center" onClick="tabs(2)">
        <div style="margin-top: 3px">TAB2</div>
        </div>
        <div style="width:auto;height: 22px; border-bottom-color: white;border-bottom-style: solid;border-bottom-width: 1px"></div>  



        <div name="tab_content"   style="display: block; margin-left:20px;" >
            <br></br>   
            <br></br>   
            <div id="legendReport">
            Notes 1:
            </div>
            <textarea   name="textArea1" rows="4" value="" cols="50"></textarea> 
            <br></br>   
            <br></br>   
            <div id="legendRough">
            Notes 2:
            </div>
            <textarea id="roughNotes_textArea" name="textArea2" rows="4" cols="50"></textarea>    
        </div> 

        <div name="tab_content"  class="tab_content" style="display: none;margin-left:20px;">
            <br></br>   
            <br></br>                    
            <textarea  name="textArea3" rows="4" cols="50" ></textarea>  
            <br></br>   
            <br></br>   
            <textarea  name="textArea4" rows="4" cols="50"></textarea>  
            <br></br>   
            <br></br>
            <br></br>   
            <br></br>                           
            <!-- Schematic of selected analysis Point -->
            <img id="myImage" src="" style="width:304px;height:228px;"></img>   
        </div>

    </body>
</html>

JavaScript文件：

//Displays the file content in text area
function displayTextfileData(textFilePath,ID){
    readTextFile(textFilePath);
    alert(textFileContent);

    var sectionDIV = "#section" + ID;
    alert(sectionDIV)

    $(sectionDIV).find("[name=textArea3]").val(textFileContent);
    $(sectionDIV).find("[name=textArea4]").val(textFileContent);
}

//This function display the image
function displayImage(imageFilePath,ID){
    var sectionDIV = "#section" + ID;
    alert("displayImageforDropdown():"+imageFilePath);
    //$(sectionDIV).find("myImage").src = imageFilePath;
    $(sectionDIV).getElementById("myImage").src = imageFilePath;
    //document.getElementById("myImage").src = imageFilePath
    //alert("displayImageforDropdown(): Assigned result: "+(document.getElementByName("displayImage").src = imageFilePath));
}

显示文本文件内容工作正常，但我想在Image

上一样

Answer 1

替换

$(sectionDIV).getElementById("myImage").src = imageFilePath;

带

$(sectionDIV).find("img#myImage").attr("src", imageFilePath);;

Answer 2

您可以设置＆＃39; src ＆＃39;属性如下：

$(sectionDIV).find("#myImage").prop("src", imageFilePath);

Answer 3

尝试以下

或

$(sectionDIV)[0].getElementById("myImage").attr("src", imageFilePath);

Answer 4

尝试

$(sectionDIV).find("#myImage").attr("src", imageFilePath);

或者如果您想使用getElementById使用$(sectionDIV)[0]从jQuery对象获取HTML DOM对象。像，

$(sectionDIV)[0].getElementById("myImage").src =  imageFilePath;

Answer 5

function displayImage(imageFilePath, ID) {
    var sectionDIV = "#section" + ID;
    //Change this line.....
    $("#myImage",$(sectionDIV))[0].src = imageFilePath;
}

使用Jquery“查找”显示图像

5 个答案: