Question

我对jquery很新，我理解其中一些但是这很难打击我。所以香港专业教育学院环顾四周寻找答案，但也许我试图过于具体。

这是我使用的jquery代码：

open System
open System.IO

// The result of a stream reader operation is either
//  Success of value
//  Failure of list of failures
type StreamReaderResult<'T> =
  | Success of 'T
  | Failure of (string*StreamPosition) list

and StreamPosition =
  {
    Stream    : byte[]
    Position  : int
  }

  member x.Remaining = max 0 (x.Stream.Length - x.Position)

  member x.ReadBytes (size : int) : StreamPosition*StreamReaderResult<byte[]> =
    if x.Remaining < size then
      x, Failure ["EOS", x]
    else
      let nsp = StreamPosition.New x.Stream (x.Position + size)
      nsp, Success (x.Stream.[x.Position..(x.Position + size - 1)])

  member x.Read (converter : byte[]*int -> 'T) : StreamPosition*StreamReaderResult<'T> =
    let size = sizeof<'T>
    if x.Remaining < size then
      x, Failure ["EOS", x]
    else
      let nsp = StreamPosition.New x.Stream (x.Position + size)
      nsp, Success (converter (x.Stream, x.Position))

  static member New s p = {Stream = s; Position = p;}

// Defining the StreamReader<'T> function is the most important decision
//   In this case a stream reader is a function that takes a StreamPosition 
//   and produces a (potentially) new StreamPosition and a StreamReadeResult
type StreamReader<'T> = StreamReader of (StreamPosition -> StreamPosition*StreamReaderResult<'T>)

// Defining the StreamReader CE
module StreamReader =
  let Return v : StreamReader<'T> =
    StreamReader <| fun sp -> 
      sp, (Success v)

  let Bind (StreamReader t) (fu : 'T -> StreamReader<'U>) : StreamReader<'U> =
    StreamReader <| fun sp -> 
      let tsp, tr = t sp
      match tr with
      | Success tv ->
        let (StreamReader u) = fu tv
        u tsp
      | Failure tfs -> tsp, Failure tfs

  let Yield (ft : unit -> StreamReader<'T>) : StreamReader<'T> =
    StreamReader <| fun sp -> 
      let (StreamReader t) = ft ()
      t sp

type StreamReaderBuilder() =
  member x.Return v   = StreamReader.Return v
  member x.Bind(t,fu) = StreamReader.Bind t fu
  member x.Yield(ft)  = StreamReader.Yield ft

let reader = StreamReaderBuilder ()

let read (StreamReader sr) (bytes : byte[]) (pos : int) : StreamReaderResult<'T> =
  let sp    = StreamPosition.New bytes pos
  let _, sr = sr sp
  sr

// Defining various stream reader functions
let readValue (converter : byte[]*int -> 'T) : StreamReader<'T> =
  StreamReader <| fun sp -> sp.Read converter

let readInt32 = readValue BitConverter.ToInt32
let readInt16 = readValue BitConverter.ToInt16
let readBytes size : StreamReader<byte[]> = 
  StreamReader <| fun sp -> 
    sp.ReadBytes size

let readImage = 
  reader {
    let! width  = readInt32 
    let! height = readInt32 
    let! bytes  = readBytes (width*height)

    return width, height, bytes
  }

[<EntryPoint>]
let main argv = 
  // Sample byte stream
  let bytes   = [|2;0;0;0;3;0;0;0;1;2;3;4;5;6|] |> Array.map byte
  let result  = read readImage bytes 0

  printfn "%A" result

  0

当我将“show_hide”类添加到我想要使用的图像时，这非常有用，然后当我添加“slidingDiv”类时，div很好地出现在上面，但是我如何将它实现为多个不同的图像div与jquery？

我今天刚刚在堆栈上注册，所以如果我做错了什么的话。

Answer 1

您可以这样做，

$("#size").empty();
$("#size").append('<option value="5">5</option>');
...

Here is a demo

如果要在单个图像上单击图像时显示并消失多个div，可以将类$(document).ready(function(){ $(".slidingDiv").hide(); //hides the div $(".show_hide").click(function(){ $(".slidingDiv").show("slow"); }); });添加到这些div

slidingDiv

Demo for multiple images

Answer 2

使用HTML设置，您需要向上导航，然后导航到兄弟.slidingDiv，如

$('.show_hide').click(function() {
        $(this).closest('div').next(".slidingDiv").slideToggle("slow");
      });

$(document).ready(function() {

  $(".slidingDiv").hide();
  //hides the div 

  $(".show_hide").show();
  //click on the img to show hidden div 

  $('.show_hide').click(function() {
    $(this).closest('div').next(".slidingDiv").slideToggle("slow");
  });
});

.slidingDiv {

  height: 75px;

  background-color: black;

  padding: 50px;

  margin-top: 10px;

  margin-bottom: 35px;

  border-bottom: 1px solid #3399FF;

}

.show_hide {

  display: none;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>


  <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" />
  <br>

</div>



<div class="slidingDiv">


  <div>


    <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" />

  </div>
</div>

<div>


  <img height="30" width="35" src="images/web.png" alt="design 1" class=" show_hide img-responsive center-block wow fadeIn" href="#" />
  <br>

</div>



<div class="slidingDiv">


  <div>


    <img height="30" width="35" src="images/web.png" alt="design 1" class="img-responsive center-block" />

  </div>
</div>

Answer 3

虽然您似乎已经找到了解决方案，但为您提供了另一种选择，即如果您对第一个地方感兴趣，here is what I have been able to produce。这是一个过于简单化的例子，你的意图是为你提供一个想法。

它的工作方式是，它会从可点击的元素中获取点击元素的index()，并且会将index()应用于需要设置动画的其他元素集合在eq()方法的帮助下。

<强> JavaScript的：

$(document).ready(function(){
    $('.image-container').on('click',function(){
        $('.sliding-div').eq($(this).index()).stop().slideToggle();
    });
});

使用此方法的好处是您不必重复代码。另一个好处是，您的sliding-div元素不一定必须与HTML中的image-container元素保持接近，它们可以位于标记中的任何位置。但缺点是它严格依赖于HTML标记的布局顺序。因此，例如，如果单击image-container元素中的第二个元素，则sliding-div元素中的第二个元素将被设置为动画。

希望这在某种程度上有所帮助。

使用jquery显示/隐藏mulptiple divs

3 个答案: