我对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?
我今天刚刚在堆栈上注册,所以如果我做错了什么的话。
答案 0 :(得分:0)
您可以这样做,
$("#size").empty();
$("#size").append('<option value="5">5</option>');
...
如果要在单个图像上单击图像时显示并消失多个div,可以将类$(document).ready(function(){
$(".slidingDiv").hide();
//hides the div
$(".show_hide").click(function(){
$(".slidingDiv").show("slow");
});
});
添加到这些div
slidingDiv
答案 1 :(得分:0)
使用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>
答案 2 :(得分:0)
虽然您似乎已经找到了解决方案,但为您提供了另一种选择,即如果您对第一个地方感兴趣,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
元素中的第二个元素将被设置为动画。
希望这在某种程度上有所帮助。