Question

我有这个HTML

    <body>
    <header>
      <img src="" alt="BANNER 200PX" />
    </header>
  <div class="contenedorBody">
    <nav id ="cssmenu">
      <ul>
        <li><a href="">Posts</a></li>
        <li><a href="">Eventos</a></li>
        <li><a href="">Noticias</a></li>
        <li class = "derecha"><a href="">Facebook</a></li>
        <li class = "derecha"><a href="">Twitter</a></li>
      </ul>
    </nav>
    <div class = "grilla">

      <div class = "col col-sidebar">
        <div class = "module">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.</p>
        </div>
      </div>

      <div class = "col col-content">
        <div class = "module" id = "36" name = "post">
          <h1>Titulo</h1>
            <div class = "col col-desc">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
              </p>
            </div>
            <div class = "col col-artwork">
              <img src="artwork.gif" class = "artwork">
            </div>
          <button class = "verFrame" value = "">Ver Frame</button> 
          <div id = "contenedorFrame"></div>
        </div>

        <div class = "module" id="7" name = "post">
          <h1>Titulo</h1>
            <div class = "col col-desc">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
              </p>
            </div>
            <div class = "col col-artwork">
              <img src="artwork.gif" class = "artwork">
            </div>
           <button class = "verFrame" value = "">Ver Frame</button>
          <div id = "contenedorFrame"></div>
        </div>        

      </div>

    </div>
  </div>
  <script src ="jquery-2.2.2.min.js" type="text/javascript"></script>
  <script src ="javascript.js" type="text/javascript"></script>
</body>

并且我想创建一个jquery函数来分配部分的所有2个按钮来触发jquery帖子以获取iframe的值并将其附加到

          <div id = "contenedorFrame"></div>

到目前为止我的jQuery是这样的：

   $(document).ready(function() {
    $("#contenedorFrame").hide();
    console.log($(this).parent(".module").children("#contenedorFrame").length);
    $('.verFrame').click(function() {
        $("#contenedorFrame").toggle();
        if ($(this).parent(".module").children("#contenedorFrame").length) {
            $.post("get_frame.php", {
                    id: "7"
                })
                .done(function(respuesta) {
                    console.log("Entre");
                    $(this).parent(".module").find("#contenedorFrame").html(respuesta);
                });
        }
    });

});

我只想做一次ajax帖子，然后打开和关闭div。

Answer 1

我将我的答案重写为javascript模块显示代码，这将帮助您编写可扩展代码。

<body>
<header>
  <img src="" alt="BANNER 200PX" />
</header>
<div class="contenedorBody">
<nav id ="cssmenu">
  <ul>
    <li><a href="">Posts</a></li>
    <li><a href="">Eventos</a></li>
    <li><a href="">Noticias</a></li>
    <li class = "derecha"><a href="">Facebook</a></li>
    <li class = "derecha"><a href="">Twitter</a></li>
  </ul>
</nav>
<div class = "grilla">

  <div class = "col col-sidebar">
    <div class = "module">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.</p>
    </div>
  </div>

  <div class = "col col-content">
    <div class = "module" id = "36" name = "post">
      <h1>Titulo</h1>
        <div class = "col col-desc">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
          </p>
        </div>
        <div class = "col col-artwork">
          <img src="artwork.gif" class = "artwork">
        </div>
      <button class = "verFrame" value ="" onClick="module.clickButton(this)">Ver Frame</button> 
      <div id = "contenedorFrame"></div>
    </div>

    <div class = "module" id="7" name = "post">
      <h1>Titulo</h1>
        <div class = "col col-desc">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae fringilla eros. Quisque sagittis vulputate lorem vitae gravida. Nulla in dui et urna lacinia posuere ut sed orci. Vivamus non sem ultrices dolor tristique elementum vel vel arcu. Donec vestibulum commodo condimentum. Nam pretium nunc sit amet nunc tristique, a egestas lorem sagittis. Suspendisse potenti. Praesent ex massa, aliquet sit amet ante quis, aliquam ultrices tortor. Praesent velit felis, tincidunt sit amet sollicitudin a, gravida sit amet ligula.
          </p>
        </div>
        <div class = "col col-artwork">
          <img src="artwork.gif" class = "artwork">
        </div>
       <button class = "verFrame" value = "" onClick="module.clickButton(this)">Ver Frame</button>
      <div id = "contenedorFrame"></div>
    </div>        

  </div>

</div>

这里是javascript代码

var module = (function(){
    function clickButton(that){
        toggleContenedorFrame(that);
        ajaxCallToUpdateDiv(that);
    }
    function ajaxCallToUpdateDiv(that){
        //do some ajax call
        $.post('somepage.php',{data:x},function(response){
            $(that).next().html(response);
        })
    }
    function toggleContenedorFrame(that){
        if($(that).next().text().length >= 0)
            $(that).next().toggle();
    }
    return {
        clickButton: clickButton
    }
})()

Answer 2

这就解决了我的问题。

    $(".grilla .verFrame").click(function(){
    if($(this).next().text().length <= 0) {
        $(this).next().load("get_frame.php", {id : $(this).attr("value")});
    }
    $(this).next().toggle();
});

Answer 3

我注意到的一件事是你的框架使用相同的Id，他们应该使用类。所有元素Ids必须是唯一的。

看起来你想要

点击按钮
从父模块中获取ID
发布到您的服务器
将内容注入.contenedorFrame

这样的事可能有用。但是，我认为你的主要问题是没有使用class选择器。

$('.contenedorBody').on('click', '.verFrame', function() {
  var $this = $(this),
      $module = $this.parents('.module:first'),
      moduleId = $module.attr('id'),
      $frame = $module.find('.contenedorFrame');

  $.ajax({
    type: 'post',
    url: 'get_frame.php',
    data: {
      id: moduleId
    },
    success: function(data) {
      console.log('success');
      $('.contenedorFrame').hide();
      $frame.show().html(data);
    },
    error: function() {
      console.log('error');
    }
  });
});

分配单击所有按钮，然后触发ajax以更改div内容

3 个答案: