Question

我有一个ajax调用，它通过Ajax将HTML页面加载到div中。一旦将页面加载到div中，就可以操纵已加载的HTML页面的内容。例如，一旦页面加载到div中，我想设置一个ID为“1”的图像，使其周围有一个像素边框。

下面是我用来将内容加载到div

中的ajax代码

function getMessage(){
var sTitle = null;
var sBody = null;
var sImage = null;
sImage = GetImageID();  
 $.ajax({  
    type: "POST",  
    url: "xt_getAJAXData.asp",  
    data: {"cid":"3586",
    "elid"          :"2425",
    "sText"         : sBody,
    "title"         : sTitle,
    "img"           : sImage
   },
   success: function(resp){  
     // we have the response  
     var toLoad = 'sys_show_template.asp?step3=1&campaignid=3586'
        $('.content').fadeOut('fast', loadContent);
        $('#load').remove();
        $('#waiting').append('<div id="load">Loading<br><img src="' + loadinggif + '" alt="Loading" /></div>');

        $('#load').fadeIn('normal');
        function loadContent() {
            $('.content').load(toLoad, '', function(response, status, xhr) {
                if (status == 'error') {
                    var msg = "Sorry but there was an error: ";
                    $(".content").html(msg + xhr.status + " " + xhr.statusText);
                }            
            }).fadeIn('slow', hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('fast');
        }
        return false;
   },  
   error: function (xmlHttpRequest, textStatus, errorThrown){  
     alert('Error: ' + xmlHttpRequest + " "+ textStatus + "" + errorThrown );  
   }  
 });

}

然后在运行此代码的页面上，我尝试了

$（'＃1'）。css（'border'，'solid 1px red'）;

这是HTML。这是一个电子邮件营销应用程序，这就是我使用表格的原因

 <table width="99%" border="0" cellspacing="1" cellpadding="2">    
        <tr>     
            <td><img id="1" src="http://xxx.xxx.xx.xxx/upload/66/img_2873.jpg" border="0" width="180" alt="Property Picture"></td>    
            <td><img id="2" src="http://xxx.xxx.xx.xxx/upload/DD/img_2875.jpg" border="0" width="180" alt="Property Picture"></td>    
            <td><img id="3" src="http://xxx.xxx.xx.xxx/upload/77/img_2877.jpg" border="0" width="180" alt="Property Picture"></td>    
        </tr>    
      </table>

但是，由于id“＃1”作为HTML流加载到div中，因此它似乎无法从进行调用的页面访问。

是否可以通过jquery AJAX操作加载到页面中的元素ID＃1的css属性，还是必须使用iFrame？

提前致谢。

Answer 1

$（“...”）。css适用responseText $.ajax附加到div：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
      function reskin()
        {
        $("#betamax").html(String(arguments[0].responseText).match(/<p.*/g)[0]);
        $("#betamax p").css("color","blue");
        }

      function beta()
        {
        var alpha = alpha || $.ajax( {complete: reskin} );
        $("body").append(String('<div id="betamax"></div>') );
        }
      beta();
    </script>
  </body>
</html>

更改通过Jquery和AJAX动态加载到DIV的HTML页面元素的样式

1 个答案: