Question

我的图片在点击事件中没有从左到右追加..我发现变量sources$没有从具有数据模块属性的div获取任何数据

按钮点击事件

$('#executeButton').click(function () {

                var sources$ = $('#sourcePane input:checked~img');

            });

显示空白对象数组

这是具有数据模块的特定div

<div data-module="Sources" data-module-id="sourcePane">

  <div>
    <input type="checkbox" name="sources"/><br/>
    <img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
  </div>

</div>

演示HTML页面中的

http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html

sources$的值存储为"img#xyz source1.png"

它不能在我的本地IIS上运行

这是完整的代码

<!DOCTYPE html>
<html>
  <head>
    <title>Move and Copy Lab Page</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css">
    <style type="text/css">
      div#sourcePane {
        float: left;
        width: 40%;
      }

      div#sourcePane img {
        margin-bottom: 8px;
      }

      div#targetPane {
        float: right;
        width: 55%;
      }

      div.target {
        border: 1px solid maroon;
        background-color: #ffffcc;
        margin-bottom: 8px;
      }

      #controls div {
        margin-bottom: 4px;
      }

      #restoreButton {
        display: none;
      }

      .done input[type=checkbox], .done #executeButton {
        display: none;
      }

      .done #restoreButton {
        display: inline;
      }
    </style>
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
    <script type="text/javascript" >
        $(function () {

            $('#restoreButton').click(function () {
                window.location = 'lab.move.and.copy.html';
            });

            $('#executeButton').click(function () {
                $('body').addClass('done');
                $('.done #controls :radio').attr('disabled', true);
                var sources$ = $('#sourcePane input:checked~img');
                if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
                var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
                var operation = $('[name=operations]:checked').val();
                targets$[operation](sources$);
            });

        });
    </script>
  </head>

  <body class="fancy">

    <div id="pageContainer">
      <div id="pageContent">

        <h1>jQuery Move and Copy Lab Page</h1>

        <div data-module="Sources" data-module-id="sourcePane">

          <div>
            <input type="checkbox" name="sources"/><br/>
            <img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
          </div>

          <div>
            <input type="checkbox" name="sources"/><br/>
            <img src="images/source2.png" alt="source 2" title="Source 2"/>
          </div>

          <div>
            <input type="checkbox" name="sources"/><br/>
            <img src="images/source3.png" alt="source 3" title="Source 3"/>
          </div>

        </div>

        <div data-module="Target Areas" data-module-id="targetPane">

          <div id="target1" class="target">
            <div><input type="checkbox" name="targets"/> Target 1</div>
          </div>

          <div id="target2" class="target">
            <div><input type="checkbox" name="targets"/> Target 2</div>
          </div>

          <div id="target3" class="target">
            <div><input type="checkbox" name="targets"/> Target 3</div>
          </div>

          <div id="controls">
            <div>
              <label>Operation:</label><br/>
              <input type="radio" name="operations" value="append" checked="checked"/> append
              <input type="radio" name="operations" value="prepend"/> prepend
              <input type="radio" name="operations" value="before"/> before
              <input type="radio" name="operations" value="after"/> after
            </div>
            <div>
              <label>Clone?:</label><br/>
              <input type="radio" name="clone" value="no" checked="checked"/> no
              <input type="radio" name="clone" value="yes"/> yes
            </div>
          </div>

          <div>
            <button type="button" class="green90x24" id="executeButton">Execute</button>
            <button type="button" class="green90x24" id="restoreButton">Restore</button>
          </div>
        </div>

        <div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>

      </div>
    </div>

  </body>
</html>

Core.css

body {
  background: #f5ffe8 none;
}

body.fancy {
  background: #cccccc url('../images/backg.png');
}

body,th,td {
  font-family: 'Verdana',sans-serif;
  font-size: 9pt;
  color: #444444;
}

#pageContainer {
  width: 752px;
  margin: 8px auto;
  border: 3px #4a6074 solid;
  background-color: white;
}

#pageContent {
  padding: 16px;
}

h1 {
  width: auto;
  height: auto;
  background-image: none;
  padding: 0;
  color: #4a6074;
  font-size: 1.4em;
}

body.fancy h1 {
  width: 640px;
  height: 41px;
  font-size: 1.2em;
  background: url('../images/banner.h1.png') no-repeat;
  padding: 24px 0 0 80px;
  margin: 0 0 16px 0;
}

label {
  font-weight: bold;
}

button {
  text-align: center;
  border: 0;
  cursor: pointer;
}

button.green90x24 {
  background: url('../images/button.90x24.green.png');
  width: 90px;
  height: 24px;
  color: #444444;
  font-weight: bold;
  padding: 0;
}

div.module {
  margin-bottom: 12px;
}

div.banner {
  background-color: #a1c772;
}

div.banner h2 {
  height: 23px;
  background: url("../images/module.slice.png") repeat-x #a1c772;
  color: white;
  font-size: 1.1em;
  font-weight: bold;
  margin: 0 4px 0 4px;
  padding: 7px 0 0 8px;
}

div.module div.body {
  padding: 8px;
  border: solid 2px #a1c772;
  background-color: #f5ffe8;
}

div.module h3 {
  color: #6b8150;
  margin: 3px 0 3px 0;
  font-size: 1.2em;
  font-weight: bold;
}

p {
  margin: 0 0 8px 0;
}

div.footer {
  text-align: center;
  clear: both;
  font-size: 0.8em;
  color: silver;
}

div.separator {
  clear: both;
}

img[src="example.jpg"] {
  background-color: white;
  border: 1px black solid;
  padding: 12px 12px 16px 12px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}

.leftCap {
  float: left;
  width: 8px;
  height: 30px;
  background: no-repeat url("../images/module.left.cap.png");
}

.rightCap {
  float: right;
  width: 8px;
  height: 30px;
  background: no-repeat url("../images/module.right.cap.png");
}

我找不到原因......

任何建议都会有所帮助

html5，JQuery - 无法从自定义属性中获取价值

0 个答案: